1、部分微信小程序默认属性值需要通过变量传递

如：

  1. <!-- 部分属性在原始小程序中使用 -->
  2. <image show-menu-by-longpress=true />
  3. <!-- 部分属性在mpvue中使用 -->
  4. <img :show-menu-by-longpress="true" />
  5. <image :show-menu-by-longpress="true" />

2、页面不支持过滤器

所以页面需要进行格式化处理的，必须先对要展示的数据进行预处理。

3、不建议使用VUE的生命周期，因为VUE的生命周期先于微信小程序的生命周期。

关于常用语法问题 - 图1

4、Class 与 Style 绑定

class 支持的语法:

  1. <p :class="{ active: isActive }">111</p>
  2. <p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
  3. <p class="static" :class="[activeClass, errorClass]">333</p>
  4. <p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
  5. <p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>

将分别被转换成:

  1. <view class="_p {{[isActive ? 'active' : '']}}">111</view>
  2. <view class="_p static {{[isActive ? 'active' : '', hasError ? 'text-danger' : '']}}">222</view>
  3. <view class="_p static {{[activeClass, errorClass]}}">333</view>
  4. <view class="_p static {{[isActive ? activeClass : '', errorClass]}}">444</view>
  5. <view class="_p static {{[[isActive ? 'active' : ''], errorClass]}}">555</view>

style 支持的语法:

  1. <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
  2. <p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

将分别被转换成:

  1. <view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
  2. <view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view>

如果子组件中需要使用 class 或者 style 则需要通过 props 变量传递，而 class 需要写在全局中。

5、列表渲染

注意：只是需要注意一点，嵌套列表渲染，必须指定不同的索引！

  1. <!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
  2. <template>
  3.     <ul v-for="(card, index) in list">
  4.         <li v-for="(item, itemIndex) in card">
  5.             {{item.value}}
  6.         </li>
  7.     </ul>
  8. </template>

6、事件映射表

注意：小程序中事件绑定默认使用bind开头，后面才是事件

  1. // 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
  2. {
  3.     click: 'tap',
  4.     touchstart: 'touchstart',
  5.     touchmove: 'touchmove',
  6.     touchcancel: 'touchcancel',
  7.     touchend: 'touchend',
  8.     tap: 'tap',
  9.     longtap: 'longtap',
  10.     input: 'input',
  11.     change: 'change',
  12.     submit: 'submit',
  13.     blur: 'blur',
  14.     focus: 'focus',
  15.     reset: 'reset',
  16.     confirm: 'confirm',
  17.     columnchange: 'columnchange',
  18.     linechange: 'linechange',
  19.     error: 'error',
  20.     scrolltoupper: 'scrolltoupper',
  21.     scrolltolower: 'scrolltolower',
  22.     scroll: 'scroll'
  23. }


7、v-html指令使用

v-html 指令会将节点转化为 rich-text 节点，默认使用节点的 string 模式。如果需要修改样式，则需要使用正则匹配，替换其中的属性值。
如：

  1. <div v-html="contentHtml"></div>
  3. 将被转化为
  4. <rich-text :nodes="contentHtml"></rich-text>

8、使用VUEX

找到你需要使用VUEX的页面的文件夹，找到其中的main.js。
打开添加

  1. import store from '@/store';
  2. Vue.prototype.$store = store;

建议直接在整个APP上添加，那么所有的页面都能共享一颗状态树，好处是前一个页面获取了用户信息存在状态树上后，后面的页面可以通过状态树进行获取，相当于缓存的作用。

9、使用fly.js替代默认请求工具

这个工具类似于axios，也被promise化了。

使用方式
新建一个fly.js

  1. import { timeout } from '@/config/env';
  3. let Fly = require('flyio/dist/npm/wx');
  4. let fly = new Fly();
  5. // 添加请求拦截器
  6. fly.interceptors.request.use(
  7.   (request, promise) => {
  8.     // console.log('promise: ', promise);
  9.     // 给所有请求添加自定义header
  10.     request.headers['Content-Type'] = 'application/json;charset=UTF-8';
  11.     // 打印出请求体
  12.     console.log(request.body);
  13.     // 终止请求
  14.     // var err=new Error("xxx")
  15.     // err.request=request
  16.     // return Promise.reject(new Error(""))
  18.     // 可以显式返回request, 也可以不返回，没有返回值时拦截器中默认返回request
  19.     return request;
  20.   },
  21.   (err, promise) => {
  22.     wx.showModal({
  23.       title: '网络错误',
  24.       content: err.message,
  25.       showCancel: false,
  26.       success(res) {
  27.         if (res.confirm) {
  28.           console.log('用户点击确定');
  29.         } else if (res.cancel) {
  30.           console.log('用户点击取消');
  31.         }
  32.       }
  33.     });
  34.     return promise.reject(err);
  35.   }
  36. );
  38. // 添加响应拦截器，响应拦截器会在then/catch处理之前执行
  39. fly.interceptors.response.use(
  40.   (response, promise) => {
  41.     // console.log('promise: ', promise);
  42.     // 只将请求结果的data字段返回
  43.     if (response.data && response.data.error_no && response.data.error_no === '0') {
  44.       return response.data;
  45.     } else {
  46.       wx.showModal({
  47.         title: '网络请求错误',
  48.         content: `${response.data.error_no}:${response.data.error_info}`,
  49.         showCancel: false,
  50.         success(res) {
  51.           if (res.confirm) {
  52.             console.log('用户点击确定');
  53.           } else if (res.cancel) {
  54.             console.log('用户点击取消');
  55.           }
  56.         }
  57.       });
  58.       return {};
  59.     }
  60.   },
  61.   (err, promise) => {
  62.     // 发生网络错误后会走到这里
  63.     wx.showModal({
  64.       title: '网络错误',
  65.       content: err.message,
  66.       showCancel: false,
  67.       success(res) {
  68.         if (res.confirm) {
  69.           console.log('用户点击确定');
  70.         } else if (res.cancel) {
  71.           console.log('用户点击取消');
  72.         }
  73.       }
  74.     });
  75.     return promise.reject(err);
  76.   }
  77. );
  79. fly.config.timeout = timeout;
  80. export default fly;

找到APP的主main.js文件。

  1. import fly from '@/data/fly';
  2. Vue.prototype.$http = fly;
  3. global.$http = fly;

页面中使用

  1. this.$http.get('http://www.baidu.com')