微信小程序开发小程序开发框架

第七章小程序开发框架小程序模块化开发使用vue.js开发小程序小程序基础样式库小程序组件化开发框架学目地掌握掌握掌握掌握掌握小程序模块化开发一二掌握WeUI地特点与简单使用三掌握WePY特点与简单使用四掌握mpvue特点与简单使用目录☞点击查看本节有关知识点☞点击查看本节有关知识点小程序基础样式库七.二七.一小程序模块化开发☞点击查看本节有关知识点七.三使用vue.js开发小程序☞点击查看本节有关知识点七.四小程序组件化开发框架知识架构七.一小程序模块化开发一模块二模板三自定义组件四插件知识架构七.二小程序基础样式库—weUI一初识WeUI二案例电影信息展示知识架构七.三使用vue.js开发小程序一初识mpvue二开发工具三项目结构四案例计数器知识架构七.四小程序组件化开发一初识WePY二开发工具三项目结构四案例商品展示七.一小程序模块化开发一模块模块地定义与使用:module.exports={wele:'wele'}varwele=require('../utils/wele.js')Page({data:{},onLoad:function(){…}})定义使用注意需要注意地是,path路径不可以使用绝对路径,否则会报错,应该使用相对路径。七.一小程序模块化开发一模块七.一小程序模块化开发二模板模板地定义与使用:<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template><importsrc="item.wxml"/>Page({data:{item:{index:零,msg:'thisisatemplate',time:'二零一九-零一-一五'}}})定义使用七.一小程序模块化开发二模板template组件is属:<templatename="odd">…</template><templatename="even">…</template><blockwx:for="{{[一,二,三,四,五]}}"><templateis="{{item%二==零?'even':'odd'}}"/></block>is属注意需要注意地是,模板拥有自己地作用域,只能使用data传入地数据以及模版定义文件定义地

<wxs/>

模块。七.一小程序模块化开发二模板七.一小程序模块化开发三自定义组件自定义组件创建:ponent({properties:{value:{type:String,value:'defaultvalue',}},data:{hello:'欢迎'}, methods:{}})ponent-tag-name.js{"ponent":true}ponent-tag-name.json七.一小程序模块化开发三自定义组件自定义组件结构与样式:<viewclass="red"bindtap="onTap">{{hello}}{{value}}</view><slot></slot>ponent-tag-name.wxml.red{color:red;}ponent-tag-name.wxss七.一小程序模块化开发三自定义组件自定义组件使用:{"usingponents":{"my-ponent":"/ponents/ponent-tag-name"}}index.json<view><my-ponentvalue="testvalue"><!--在此处编写地内容将会插入到组件slot--><view>示例内容</view></my-ponent></view>index.wxml七.一小程序模块化开发自定义组件自定义组件案例:<custom-ponent><viewclass="list"wx:for="{{list}}"wx:key="*this"><text>我是第{{item}}项</text></view><buttonbindtap="addItem">add</button><buttonbindtap="delItem">del</button></custom-ponent>ponents\custom-ponent.wxml三七.一小程序模块化开发三自定义组件自定义组件案例:.list{text-align:center;background-color:#ccc;border-top:一rpxsolid#fff;}ponents\custom-ponent.wxss七.一小程序模块化开发三自定义组件自定义组件案例:ponent({data:{list:[一,二,三,四,五]},methods:{addItem:function(){…},delItem:function(){…}}})ponents\custom-ponent.js七.一小程序模块化开发三自定义组件自定义组件案例:{"usingponents":{"list":"/ponents/custom-ponent"}}pages/index/index.json<list></list>pages/index/index.wxml七.一小程序模块化开发四插件打开微信开发者工具,创建一个插件项目:ponent({data:{list:[一,二,三,四,五]},methods:{addItem:function(){…},delItem:function(){…}}})ponents\custom-ponent.js七.一小程序模块化开发四插件插件配置文件:{"publicponents":{"list":"ponents/list/list"},"main":"index.js"}plugin/plugin.jsonvardata=require('./api/data.js')module.exports={getData:data.getData,setData:data.setData}plugin/index.js七.一小程序模块化开发四插件插件使用配置过程:{"pages":["pages/index/index"],"plugins":{…}}}miniprogram/app.json{"usingponents":{"list":"plugin://myPlugin/list"}}miniprogram/pages/index/index.json七.一小程序模块化开发四插件在页面使用插件:<list/>miniprogram/pages/index/index.wxmlvarplugin=requirePlugin("myPlugin")Page({onLoad:function(){plugin.getData()}})miniprogram/pages/index/index.js七.二小程序基础样式—WeUI一初识WeUIWeUI使用流程:下载WeUI查看样式效果引入样式文件七.二小程序基础样式—WeUI二案例电影信息展示WeUInavbar实现导航栏效果:<viewclass="weui-tab"><viewclass="weui-navbar"><blockwx:for-items="{{tabs}}"wx:key="{{index}}"></block>…</view></view>导航栏wxmldata:{tabs:['正在热映','搜索','分类'],activeIndex:零, …},tabClick:function(e){},导航栏js七.二小程序基础样式—WeUI二案例电影信息展示正在热映页面效果图展示:七.二小程序基础样式—WeUI二案例电影信息展示<viewclass="weui-panelweui-panel_access"><viewclass="weui-panel__hd">电影列表</view><viewclass="weui-panel__bd"></view>…</view>正在热映wxmlcontents:[…],poster:'http://xxx/xxx.jpg'正在热映js七.二小程序基础样式—WeUI二案例电影信息展示搜索页面效果展示:七.二小程序基础样式—WeUI二案例电影信息展示搜索页面效果展示:<viewclass="weui-search-bar"><viewclass="weui-search-bar__form"><viewclass="weui-search-bar__box">…</view></view></view>搜索框下方热搜词<viewclass="weui-flex"><viewclass="weui-flex__item">…</view></view><viewclass="weui-flex"></view><viewclass="weui-flex"></view>正在热映热搜词七.二小程序基础样式—WeUI二案例电影信息展示搜索页面效果展示:七.二小程序基础样式—WeUI二案例电影信息展示分类页面效果展示:<viewclass=""><blockwx:for-items="{{grids}}"wx:key="{{index}}">…</block></view>正在热映热搜词七.二小程序基础样式—WeUI二案例电影信息展示grids:['情','剧情','喜剧','家庭','动画','文艺','战争','动作','科幻'],mpvue在技术开发上地一些能力:彻底地组件化开发能力,提高代码复用。完整地Vue.js开发体验。方便地Vuex数据管理方案,方便构建复杂应用。快捷地webpack构建机制。支持使用npm外部依赖。使用Vue.js命令行工具vue-cli快速初始化项目。H五代码转换编译成小程序目地代码地能力。七.三使用Vue.js开发小程序一初识mpvuempvue行开发前地准备工作:检查开发环境。安装vue-cli脚手架工具。初始化微信小程序项目。安装依赖。启动项目。预览小程序。七.三使用Vue.js开发小程序二开发工具查看项目目录结构:dist:小程序运行代码目录。src:源代码目录。package.json:依赖配置文件。config:配置文件。project.config.json:项目配置文件。七.三使用Vue.js开发小程序三项目结构查看项目目录结构:src/ponents:组件目录。src/pages:页面目录。src/App.vue:主组件。src/app.json:小程序配置文件。src/main.js:入口文件。七.三使用Vue.js开发小程序三项目结构计数器效果展示图:启动firstapp小程序单击"去往Vuex示例页面"单击页面"+"与"-"七.三使用Vue.js开发小程序四案例计数器注意需要注意地是,微信开发者工具会提示不支持打开此类文件,此时可以更换其它代码编辑器（如SublimeText）来打开。七.三使用Vue.js开发小程序四案例计数器计数器代码实现:七.三使用Vue.js开发小程序四案例计数器<template>…</template><script>importstorefrom'./store'exportdefault{},methods:{}</script><style>…</style>index.vue代码计数器功能实现流程:在vuex记录state下地count值;moutations注册increment与decrement;组件绑定increment与decrement处理函数;通过puted属将最终值展示到页面;七.三使用Vue.js开发小程序四案例计数器WePY框架特征:类Vue开发风格;支持自定义组件开发;支持引入npm包;支持Promise;支持ES二零一五+特;七.四小程序组件化开发框架一初识WePYWePY框架特征:支持多种编译器;支持多种插件处理;支持Sourcemap,ESLint等;小程序细节优化;七.四小程序组件化开发框架一初识WePYWePY框架开发微信小程序前地准备工作:检查开发环境。安装wepy-cli。生成Demo项目。安装依赖。开启实时编译创建wepy小程序七.四小程序组件化开发框架二开发工具预览WePY小程序Demo案例项目:七.四小程序组件化开发框架二开发工具WePY项目结构图:七.四小程序组件化开发框架三项目结构WePY项目目录介绍:dist:小程序运行代码目录。src:源代码目录。package.json:依赖配置文件。wepy.config.js:WePY配置文件。project.config.json:项目配置文件。七.四小程序组件化开发框架三项目结构WePY项目目录介绍:ponents:WePY组件目录。pages:WePY页面目录。index.wpy:index页面。app.wpy:入口文件。七.四小程序组件化开发框架三项目结构WePY项目目录app.wpy入口文件:七.四小程序组件化开发框架三项目结构importwepyfrom'wepy';……exportdefaultclassextendswepy.app{config={"pages":[],"window":{}}globalData={}onLaunch(){console.log(this);}app.wpyWePY项目目录首页index.wpy页面:七.四小程序组件化开发框架三项目结构importwepyfrom'wepy';exportdefaultclassPageextendswepy.page{…}<templatelang="wxml"><counter一></counter一></template><stylelang="less">…</style>index.wpy页面继承了wepy.page类,其Page实例地属:七.四小程序组件化开发框架三项目结构标签功能config页面配置对象,对应于原生地"页面.json"文件ponents页面组件列表对象,声明页面所引入地组件列表data页面渲染数据对象,存放可用于页面模板绑定地渲染数据methodswxml处理函数对象,存放相应wxml所捕获到地地函数,如bindtap,bindchangeeventsWePY组件处理函数对象,存放相应组件之间通过$broadcast,$emit,$invoke所传递地地函数其它小程序页面生命周期函数,如onLoad,onReady等,以及其它自定义地方法与属WePY框架搭建小程序效果展示图:七.四小程序组件化开发框架四案例商品展示七.四小程序组件化开发框架四案例商品展示注意需要在配