初探小程序之mpvue 以及 iView Weapp 的使用

前言：mpvue —— 美团开源的小程序开发框架。自开源依赖获得了大量star并一跃成为了小程序开发的新宠。如果说wepy是类vue开发，那mpvue是无限接近vue开发。

 

mpvue：继承自vue.js，其技术规范和语法特点与 vue.js 保持一致。

 

名称由来：mp：mini program 的缩写

        mpvue：Vue.js in mini program

 

框架原理：mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力

        mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力

                 修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件

 

常见使用：

• 组件传参：===>>注意：微信小程序官方的路由API传参时只能传递 字符串类型 的数据

               传递：wx.navigateTo({url : "url地址?参数1=值1&参数2=值3..." });

               接收：this.$root.$mp.query.参数名    ==>>小程序page onLoad生命周期内，即监听页面加载

                          this.$root.$mp.appOptions.参数名      ==>>小程序app onLaunch/onShow生命周期内，即初始化和小程序启动                                                                                                 或从后台进入前台显示

               实例：wx.navigateTo({url : '../addAddress/main?editItem=' + JSON.stringify(item)});

                          if(this.$root.$mp.query.editItem){             //mounted 生命周期内

                                    console.log(JSON.parse(this.$root.$mp.query.editItem));

                           }

• 小程序的路由API

           wx.redirectTo({ url : '' } { success / fail / complete的回调函数 });    ==>>  重定向

           wx.reLaunch({ url : '' } { success / fail / complete的回调函数 });    ==>>  关闭所有页面，打开到应用内的某个页面

           wx.navigateTo({ url : '' } { success / fail / complete的回调函数 });    ==>>  跳转页面

           wx.switchTab({ url : '' } { success / fail / complete的回调函数 });    ==>>  跳转tabBar 页面

           wx.navigateBack({ url : '' } { success / fail / complete的回调函数 });    ==>>  返回上一页

• .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！

         eg:

                       

点击子元素

               

     

• .prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
• .self 没有可以判断的标识
• .once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑

 

项目目录代码解释：

 

pages文件夹中的每一个页面中的文件：index.vue、main.js、main.json

index.vue   ==>>  通过vue.js、小程序组件和API、UI框架iview以及JavaScript写页面布局和逻辑处理

main.js  ==>>  实例化vue组件并挂载组件；固定写法

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

main.json  ==>>  该页面的页面配置；如页面标题栏的文字，需要用的UI组件引入

{
  "navigationBarTitleText": "我的",           
  "navigationBarBackgroundColor": "#fcc",
  "navigationBarTextStyle": "black",
  "usingComponents": {
    "i-button": "/static/iview/button/index",
    "i-icon": "/static/iview/icon/index"
  }
}

微信小程序的配置可以阅读官方文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

 

iview Weapp组件的使用方法：

1. 下载小程序组件库 (前提是你已经有了项目目录）

        你可以直接去github把iView Weapp的代码下载下来，也可以用过npm来下载。

        github地址：https://github.com/TalkingData/iview-weapp

2. 将组件库复制到工程的static目录下

        下载完成后，到它的目录中寻找名为dist的目录并复制到你的mpvue工程下的static目录下（记得一定要是static目录，否则这些代码会被mpvue编译器错误的进行处理），然后给这个dist目录改个名字，比如叫iview。

       如：

3.  为需要使用自定义组件的Page进行配置

       在页面对应的配置文件（main.json)中引入组件

         

4. 在Page中使用自定义组件；即在index.vue中使用

注意：iView Weapp给我的感觉好像是没有开发完成（毕竟是2018-05才出来的）；很多组件提供的属性根本没有作用，甚至于暴露出来的属性在他们的源码里面根本就没有定义（但就算是这样的情况，iView Weapp也是比较好的UI框架了）。所以请大家在使用时注意，前方高能，注意填坑！！！

 

最后：总结一下可能用到的官方文档

mpvue：http://mpvue.com/

微信小程序：https://developers.weixin.qq.com/miniprogram/dev/

iView Weapp：https://weapp.iviewui.com/docs/guide/start

vue.js：https://cn.vuejs.org/v2/guide/

iView Weapp GitHub下载：https://github.com/TalkingData/iview-weapp

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！