18-12-05 mpvue专题

330 阅读2分钟

视频进度

npm中的vue全局命令无效

npm中的vue全局命令是全局安装vue-cli之后生效的

vsnode在阳光强烈的时候可以更换为Light默认主题

mpvue同时开发h5页面

blog.csdn.net/Aimee1608/a…

一些坑点

  1. npm run dev每次会重新打包dist文件,测试只能在微信开发者工具上
  2. mpvue中绑定小程序原生事件不能使用bind + 事件名,需要使用@+ 事件名,且要定义在methods中否则不生效
3. 可以是用vuex分模块开发,但是注意不要使用app.js这个文件名,否则会一直报错

vue实例生命周期与小程序生命周期

  1. beforeCreate:实例初始化之后,数据观测data observer和event/watcher 事件配置之前被调用
  2. created:数据观测data observer, 属性和方法的运算 event/watcher事件回调都已完成,挂载阶段还未开始,$el不可见
  3. beforeMount:在挂载开始之前被调用,相关的render函数首次被调用
  4. mounted:生成vm.$el,并挂载到实例上
  5. beforeUpdate: 数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前,你可以在这个钩子中进一步的更改状态,这不会触发附加的重渲染过程
  6. updated: 数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子
  7. beforeDestroy:实例销毁之前调用
  8. destroyed:实例销毁之后调用,此时,会解除绑定,移除监听器,销毁子实例

小程序应用实例生命周期

  1. onLaunch:小程序应用初始化
  2. onShow:小程序启动,或从后台进入前台
  3. onHide:从前台进入后台

小程序页面Page实例生命周期

  1. onLoad:监听页面加载
  2. onShow:页面显示
  3. onReady:页面初始化渲染完成
  4. onHide:监听页面隐藏动作,此时页面依然存活
  5. onUnload:监听页面卸载
  6. onPullDownRefresh:用户下拉刷新
  7. onReachBottom:上来触底操作
  8. onShareAppMessage:用户点击右上角分享功能
  9. onPageScroll:页面滚动

获取用户信息

    1.                                                   2.
<Button v-if="AUTO_INFO_FALSE" open-type="getUserInfo" @getuserinfo="getUserInfo">get</Button>

注意点:

  1. 原生的button要改为大写的Button
  2. 例如bindgetuserinfo这样的bind开头的小程序提供的原生函数,要改为@ + 去掉bind的形式

mpvue中的组件注册

  1. 单独的页面注册的时候,需要在全局的app.json中注册,另外还需要单独注册一个main.js和与之同名的json文件,如main.json
  2. 而页面用的组件,同样需要建立main.js,但是不需要json文件,main.js文件中,也不需要有内容