从 Vue.js 到微信小程序 - 框架语法差异与开发技巧_通过vue.js来开发微信小程序

作为一名有 Vue 开发经验的开发者,如果想快速掌握小程序开发,需要了解 Vue 和小程序在设计上的主要差异,这样可以更好地过渡和适应小程序的开发模式。以下是我总结的几个重点:

1. 页面定义:

   • Vue 中使用 .vue 文件定义页面,包含模板、脚本和样式。
   • 小程序中使用三个文件定义页面:WXML(模板)、WXSS(样式)、JS(脚本)。

   Vue 页面示例:

   <template>
     <view>
       <text>{{ message }}</text>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         message: 'Hello, Vue!'
       }
     }
   }
   </script>
   
   <style scoped>
   text {
     color: blue;
   }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21

   小程序页面示例:

   <!-- index.wxml -->
   <view>
     <text>{{ message }}</text>
   </view>
   1
   2
   3
   4

   // index.js
   Page({
     data: {
       message: 'Hello, Miniprogram!'
     }
   })
   1
   2
   3
   4
   5
   6

   /* index.wxss */
   text {
     color: blue;
   }
   1
   2
   3
   4

2. 数据绑定:

   • Vue 使用 Mustache 语法 {{ }} 进行数据绑定。
   • 小程序使用 {{ }} 语法进行数据绑定。

3. 事件处理:

   • Vue 使用 v-on:click="handleClick" 绑定事件。
   • 小程序使用 bindtap="handleClick" 绑定事件。

   Vue 事件示例:

   <button @click="handleClick">Click me</button>
   1

   export default {
     methods: {
       handleClick() {
         console.log('Button clicked!')
       }
     }
   }
   1
   2
   3
   4
   5
   6
   7

   小程序事件示例:

   <button bindtap="handleClick">Click me</button>
   1

   Page({
     handleClick() {
       console.log('Button clicked!')
     }
   })
   1
   2
   3
   4
   5

4. 条件渲染和列表渲染:

   • Vue 使用 v-if 和 v-for 指令。
   • 小程序使用 wx:if 和 wx:for 指令。

   Vue 条件渲染示例:

   <view v-if="isVisible">
     <text>This is visible</text>
   </view>
   1
   2
   3

   小程序条件渲染示例:

   <view wx:if="{{isVisible}}">
     <text>This is visible</text>
   </view>
   1
   2
   3

5. 组件定义:

   • Vue 使用 .vue 文件定义组件,包含模板、脚本和样式。
   • 小程序使用 .js 和 .json 文件定义组件,组件的模板和样式在同一个目录下。

   Vue 组件示例:

   <!-- MyComponent.vue -->
   <template>
     <view>
       <text>{{ message }}</text>
     </view>
   </template>
   
   <script>
   export default {
     props: {
       message: {
         type: String,
         required: true
       }
     }
   }
   </script>
   
   <style scoped>
   text {
     color: red;
   }
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23

   小程序组件示例:

   // MyComponent.js
   Component({
     properties: {
       message: {
         type: String,
         required: true
       }
     },
     methods: {
       // 组件方法
     }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

   // MyComponent.json
   {
     "component": true,
     "usingComponents": {}
   }
   1
   2
   3
   4
   5

   <!-- MyComponent.wxml -->
   <view>
     <text>{{ message }}</text>
   </view>
   1
   2
   3
   4

   /* MyComponent.wxss */
   text {
     color: red;
   }
   1
   2
   3
   4

6. 路由管理:

   • Vue 使用 vue-router 库进行路由管理。
   • 小程序内置路由系统,使用 wx.navigateTo() 等API进行页面跳转。

   Vue 路由示例:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   const router = new VueRouter({
     routes: [
       { path: '/', component: Home },
       { path: '/about', component: About }
     ]
   })
   
   new Vue({
     router
   }).$mount('#app')
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   小程序路由示例:

   // 页面跳转
   wx.navigateTo({
     url: '/pages/about/index'
   })
   
   // 页面返回
   wx.navigateBack()
   1
   2
   3
   4
   5
   6
   7

7. 状态管理:

   • Vue 通常使用 Vuex 进行全局状态管理。
   • 小程序内置 data 和 setData() 进行状态管理,也可以引入 Redux 或 Mobx 等第三方库。

   Vuex 状态管理示例:

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment(state) {
         state.count++
       }
     },
     actions: {
       increment({ commit }) {
         commit('increment')
       }
     }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

   小程序内置状态管理示例:

   Page({
     data: {
       count: 0
     },
     onTap() {
       this.setData({
         count: this.data.count + 1
       })
     }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

8. 网络请求:

   • Vue 通常使用 Axios 等第三方库进行网络请求。
   • 小程序使用内置的 wx.request() API进行网络请求。

   Axios 网络请求示例:

   import axios from 'axios'
   
   export default {
     methods: {
       fetchData() {
         axios.get('/api/data')
           .then(response => {
             // 处理响应数据
           })
           .catch(error => {
             // 处理错误
           })
       }
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

   小程序网络请求示例:

   wx.request({
     url: '/api/data',
     success: res => {
       // 处理响应数据
     },
     fail: err => {
       // 处理错误
     }
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9

9. 第三方库集成:

   • Vue 拥有丰富的第三方库生态,可以很方便地引入和集成。
   • 小程序需要适配小程序环境,有一些第三方库需要小程序版本。

通过以上对比,相信你已经对 Vue 和小程序在技术栈、开发模式等方面有了更深入的理解。小程序虽然有一些独特的地方,但其核心的开发思路和 Vue 是非常相似的。只要掌握了这些差异,你作为一个有 Vue 开发经验的开发者,相信可以很快地上手小程序开发。