E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

前言: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: div @click = “click1”                       p @click.stop = “click2″点击子元素/p               /div     .prevent 可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面.self 没有可以判断的标识.once 也不能做,因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意,暂不考虑 项目目录代码解释: pages文件夹中的每一个页面中的文件:index.vue、main.js、main.jsonindex.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-weapp2. 将组件库复制到工程的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/startvue.js:https://cn.vuejs.org/v2/guide/iView Weapp GitHub下载:https://github.com/TalkingData/iview-weapp 文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 初探小程序之mpvue以及iViewWeapp的使用
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏