小程序
A Mpvue project
# 初始化项目
vue init mpvue/mpvue-quickstart myproject
cd myproject
# 安装依赖
yarn
# 开发时构建
npm dev
# 打包构建
npm build
# 指定平台的开发时构建(微信、百度、头条、支付宝)
npm dev:wx
npm dev:swan
npm dev:tt
npm dev:my
# 指定平台的打包构建
npm build:wx
npm build:swan
npm build:tt
npm build:my
# 生成 bundle 分析报告
npm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
if (/^wx$/.test(PLATFORM)) {
baseWebpackConfig = merge(baseWebpackConfig, {
plugins: [
new CopyWebpackPlugin([{
from: resolve('node_modules/vant-weapp/dist'),
to: resolve('dist/wx/vant-weapp/dist'),
ignore: ['.*']
}])
]
})
}
var isReservedTag = makeMap(
'template,script,style,element,content,slot,link,meta,svg,view,' +
'a,div,img,image,text,span,richtext,input,switch,textarea,spinner,select,' +
'slider,slider-neighbor,indicator,trisition,trisition-group,canvas,' +
'list,cell,header,loading,loading-indicator,refresh,scrollable,scroller,' +
'video,web,embed,tabbar,tabheader,datepicker,timepicker,marquee,countdown',
true
);
也就是说实际开发过程中写 img 和写 image 都是可以的,mpvue 都可以正常识别
是不会被识别的,所以不能在template模板中用
直接在组件上写样式不会生效
禁用eslint 在scritp标签顶部加入以下代码 / eslint-disable /
一个组件中导入了某个对象,不能直接在template模板中使用该对象,会报错,可以在computed中定义个方法,方法里面直接返回这个对象,这样就可以在template模板中通过computed的方法去调用了
created 之前会完成 props、methods、data、computed 和 watch 五大属性的解析;
created 之后 mpvue 会初始化 App 和 Page 对象,并调用小程序的钩子函数(如 onShow、onReady 等),此时界面已完成渲染;
App 和 Page 对象初始化完毕后,mpvue 会调用 beforeMount 之后开始对状态的更新(如更新 data 中的值等);
状态更新完毕后,mpvue 会调用 page.setData 对界面进行再次更新,之后 mpvue 会调用 mounted 钩子函数,此时小程序渲染完毕。
11.在新添加了路由后,需要重新 npm run dev
12.页面配置的json文件必须与js文件同名,否则配置不会生效
14.在mpvue.showmodal({ })方法中,不能使用this,这里的this指向的不是vue实例,应先在方法外部把ths赋值给一个变量缓存。
15.tabBar的问题:pages数组的第一项必须是tabBar的list数组的一员,否则不会显示tabBar。
16.小程序页面卸载的时候,vue不会执行beforeDestroy和destroyed函数,也就是说vue实例并不会销毁,只会执行小程序的onUnload生命周期函数,小程序的page实例会被销毁掉,vue内部的状态会被保存。解决方法:小程序加载页面的时候初始化data里面的数据。
onLoad() {
Object.assign(this.$data, this.$options.data())
}
17.通过back的方式返回上一级页面,上一级页面不会重新调用mounted()方法,但是会再次调用onShow()方法
18.在template模板中不能直接用$store取值,可以通过computed计算属性来获得$store的值
19.小程序的生命周期函数只能在vue实例绑定的根组件中起作用,在其余子组件中不会起作用。(表述可能不太准确)