学习笔记：mpvue开发小程序——入门

大宋江山之钱庄 發表於 2019-5-16 18:20:00

学习笔记：mpvue开发小程序——入门

接下来可能要开发一个小程序，同事推荐使用mpvue，那么我提前熟悉下。
 
官网地址：http://mpvue.com/
 
<h3>1.快速上手 http://mpvue.com/mpvue/quickstart/</h3>
跟着官网提示走，搭建一个mpvue的小程序项目
注意，这里我用yarn代替了npm才安装成功。
 
<h3>2.分包机制</h3>
mpvue-loader 1.1.2-rc.2之后，优化了build后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。
 
<h3>3.注意事项：新增的页面需要重新 npm run dev 或 yarn run dev来进行编译</h3>
 
<h3>4.不要在选项属性或回调上使用箭头函数</h3>
比如：
<div class="cnblogs_code">
<pre>created: () => console.log(this.a)</pre>
</div>
或
<div class="cnblogs_code">
<pre>vm.$watch('a', newValue => this.myMethod())</pre>
</div>
因为箭头函数是和父级上下文绑定在一起的，this不会是如你做预期的vue实例，且this.a或this.myMethod也会是未定义的
 
5.微信小程序的页面的query参数是通过onLoad获取的，mpvue对此进行了优化，直接通过this.$root.$mp.query获取相应的数据参数，其调用需要在onLoad生命周期出发之后使用，比如onShow等
 
<h3>6.不支持 v-html</h3>
 
<h3>7.不支持部分复杂的JavaScript渲染表达式</h3>
 
<h3>8.不支持过滤器</h3>
 
<h3>9.不支持在template内使用methods中的函数</h3>
 
<h3>10.class支持的语法：</h3>
<div class="cnblogs_code">
<pre><p :class="{ active: isActive }">111</p>
<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
<p class="static" :class="">333</p>
<p class="static" v-bind:class="">444</p>
<p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p></pre>
</div>
将分别被转换成：
<div class="cnblogs_code">
<pre><view class="_p {{}}">111</view>
<view class="_p static {{}}">222</view>
<view class="_p static {{}}">333</view>
<view class="_p static {{}}">444</view>
<view class="_p static {{[, errorClass]}}">555</view></pre>
</div>
 
<h3>11.style支持的语法：</h3>
<div class="cnblogs_code">
<pre><p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
<p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p></pre>
</div>
将分别被转换成：
<div class="cnblogs_code">
<pre><view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">666</view>
<view class="_p" style=" {{'color:' + activeColor + ';' + 'font-size:' + fontSize + 'px' + ';'}}">777</view></pre>
</div>
不支持vue官网的class和style绑定语法
 
<h3>12.用computed方法生成class或style字符串，插入到页面中</h3>
<div class="cnblogs_code">
<pre><template>

<div class="container" :class="computedClassStr"></div>
<div class="container" :class="{active: isActive}"></div>


<div class="container" :class="computedClassObject"></div>
</template>
<script>
export default {
 data () {
 return {
 isActive: true
 }
 },
 computed: {
 computedClassStr () {
 return this.isActive ? 'active' : ''
 },
 computedClassObject () {
 return { active: this.isActive }
 }
 }
}
</script></pre>
</div>
 
<h3>13.嵌套列表渲染必须指定不同的索引</h3>
<div class="cnblogs_code">
<pre>
<template>
<ul v-for="(card, index) in list">
 <li v-for="(item, itemIndex) in card">
 {{item.value}}
 </li>
</ul>
</template></pre>
</div>
 
<h3>14.事件处理器，全支持。</h3>
<div class="cnblogs_code">
<pre>// 事件映射表，左侧为 WEB 事件，右侧为小程序对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}</pre>
</div>
在input和textarea中change事件会被转为blur事件
小程序能力所致，bind和catch事件同时绑定时，只会触发bind，catch不会被触发，要避免踩坑。
事件修饰符：
<table style="width: 600px" border="1">
<tbody>
<tr style="background-color: rgba(154, 205, 50, 1)">
<td>修饰符</td>
<td>说明</td>
</tr>
<tr>
<td>.stop</td>
<td>阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的catchEventName失效</td>
</tr>
<tr>
<td>.prevent</td>
<td>可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面</td>
</tr>
<tr>
<td>.capture</td>
<td> </td>
</tr>
<tr>
<td>.self</td>
<td>没有可以判断的标识</td>
</tr>
<tr>
<td>.once</td>
<td>也不能做，因为小程序没有removeEventListener，虽然可以直接在handleProxy中处理，但非常的不优雅，违背了意愿，暂不考虑</td>
</tr>
<tr>
<td>键值修饰符</td>
<td>在小程序中没有键盘，所以...</td>
</tr>
</tbody>
</table>
 
 
<h3>15.表单控件绑定，几乎全支持。</h3>
建议直接使用微信小程序表单组件。用法示例：
select组件用picker组件进行代替
<div class="cnblogs_code">
<pre><template>
<div>
<picker @change="bindPickerChange" :value="index" :range="array">
 <view class="picker">
 当前选择：{{array}}
 </view>
</picker>
</div>
</template>

<script>
export default {
data () {
return {
 index: 0,
 array: ['A', 'B', 'C']
}
},
methods: {
bindPickerChange (e) {
 console.log(e)
}
}
}
</script></pre>
</div>
表单元素radio用radio-group组件进行代替
<div class="cnblogs_code">
<pre><template>
<div>
<radio-group class="radio-group" @change="radioChange">
 <label class="radio" v-for="(item, index) in items" :key="item.name">
 <radio :value="item.name" :checked="item.checked"/> {{item.value}}
 </label>
</radio-group>
</div>
</template>

<script>
export default {
data () {
return {
 items: [
 {name: 'USA', value: '美国'},
 {name: 'CHN', value: '中国', checked: 'true'},
 {name: 'BRA', value: '巴西'},
 {name: 'JPN', value: '日本'},
 {name: 'ENG', value: '英国'},
 {name: 'TUR', value: '法国'}
 ]
}
},
methods: {
radioChange (e) {
 console.log('radio发生change事件，携带value值为：', e.target.value)
}
}
}
</script></pre>
</div>
 
<h3>16.详细的不支持列表：</h3>
<ul>
<li>暂不支持在组件引用时，在组件上定义click等原生事件、v-show(可用v-if代替)和class style等样式属性</li>
<li>例：<card class="class-name"> </card>样式时不会生效的，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上</li>
<li>Slot(scoped暂时还没做支持)</li>
<li>动态组件</li>
<li>异步组件</li>
<li>inline-template</li>
<li>X-Templates</li>
<li>keep-alive</li>
<li>transition</li>
<li>class</li>
<li>style</li>
</ul>
 
<h3>17.mpvue可以支持小程序的原生组件</h3>
比如picker,map等等。需要注意的是原生组件上的事件绑定，需要以vue的事件绑定语法来绑定，如 bindchange="eventName"事件需要写成@change="eventName"
示例代码：
<div class="cnblogs_code">
<pre><picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
 当前选择: {{date}}
</view>
</picker></pre>
</div>
 
<h3>18.TypeScript支持</h3>
配置方法 http://mpvue.com/build/mpvue-loader/#typescript， Demo见 mpvue-ts-demo
 
<h3>19.最佳实践</h3>
（1）精简data数据
（2）优化长列表性能
<ul>
<li>避免在v-for中嵌套子组件，这样可以优化大部分setData时的冗余数据</li>
<li>直接通过样式display来展示和隐藏</li>
</ul>
（3）合理使用双向绑定，建议使用 v-model.lazy绑定方式以优化性能
（4）谨慎选择直接使用小程序的API，如果你有小程序和H5福永代码的需要，业务代码需要保持对WEB Vue.js的兼容性。可通过桥接适配层屏蔽两端差异。
 
<h3>20.常见问题</h3>
（1）如何获取小程序在page onLoad时候传递的options
<div class="cnblogs_code">
<pre>this.$root.$mp.query</pre>
</div>
（2）如何获取小程序在app onLaunch/onShow的时候传递的options
<div class="cnblogs_code">
<pre>this.$root.$mp.appOptions</pre>
</div>
（3）如何捕获app的onError
由于onError不是完整意义的生命周期，所以只提供一个捕获错误的方法，在app的根组件上添加名为onError的回调函数即可，如下：
<div class="cnblogs_code">
<pre>export default {
// 只有 app 才会有 onLaunch 的生命周期
 onLaunch () {
 // ...
 },

// 捕获 app error
 onError (err) {
 console.log(err)
}
}</pre>
</div>
 
<h3>21.mpvue框架使用场景汇总</h3>
mpvue小程序框架包含：
<ul>
<li>运行时JS SDK</li>
<li>初始化模板项目（包含推荐的目录结构，webpack构建，代码检查配置等）</li>
<li>项目构建所需的npm依赖（已经包含在项目模板中，无需手动引入）</li>
</ul>
开发者可能会面对的四种典型场景：
<ul>
<li>单独以mpvue框架构建小程序
<ul>
<li>推荐的方式，无需额外支持</li>
</ul>
</li>
<li>mpvue框架为主，同时使用其它框架（原生开发方式或wepy等）</li>
<li>已经使用其他框架，引入mpvue做部分模块的开发</li>
<li>只是用mpvue的JS SDK，自定义构建策略</li>
</ul>
 
 
（完）
以上笔记摘自： mpvue官方文档 http://mpvue.com/mpvue/
  
来源：https://www.cnblogs.com/cathy1024/p/10877248.html

頁: [1]

琼殿技术论坛's Archiver

学习笔记：mpvue开发小程序——入门