第7章 小程序开发框架

第7章小程序开发框架小程序模块化开发使用vue.js开发小程序小程序基础样式库小程序组件化开发框架学习目标掌握小程序模块化开发掌握mpvu
e特点和简单使用掌握掌握WeUI的特点和简单使用掌握WePY特点和简单使用掌握1234掌握目录7.17.47.37.2小程序模块化
开发小程序组件化开发框架使用vue.js开发小程序?点击查看本节相关知识点小程序基础样式库?点击查看本节相关知识点?点击查看本节相
关知识点?点击查看本节相关知识点知识架构7.1小程序模块化开发1模块2模板3自定义组件4插件知识架构7.2小程序基础样式库—w
eUI1初识WeUI2【案例】电影信息展示知识架构7.3使用vue.js开发小程序1初识mpvue2开发工具3项目结构4【案例】
计数器知识架构7.4小程序组件化开发1初识WePY2开发工具3项目结构4【案例】商品展示7.1小程序模块化开发1模块模块的定
义和使用：使用定义module.exports={welcome:''welcome''}varwelcome=requ
ire(''../utils/welcome.js'')Page({data:{},onLoad:function(){…
}})7.1小程序模块化开发1模块注意需要注意的是，path路径不可以使用绝对路径，否则会报错，应该使用相对路径。7.1
小程序模块化开发2模板模板的定义和使用：定义使用
{{index}}:{{msg}}Time:{{time}}<
/template>Page({data:{item:{index:
0,msg:''thisisatemplate'',time:''2019-01-15''}}})7.1小程序模块化开发
2模板template组件is属性：is属性…name="even">…mplateis="{{item%2==0?''even'':''odd''}}"/>7.1小程序模块
化开发2模板注意需要注意的是，模板拥有自己的作用域，只能使用data传入的数据以及模版定义文件中定义的??模块。7
.1小程序模块化开发3自定义组件自定义组件创建：component-tag-name.jscomponent-tag-name
.jsonComponent({properties:{value:{type:String,value:''defau
ltvalue'',}},data:{hello:''欢迎''}, methods:{}}){"component":
true}7.1小程序模块化开发3自定义组件自定义组件结构和样式：component-tag-name.wxmlcompone
nt-tag-name.wxss{{hello}}{{va
lue}}.red{color:red;}7.1小程序模块化开发3自定义组件自定
义组件使用：index.jsonindex.wxml>示例内容
{"usingComponents":{"my-component":"/components/compon
ent-tag-name"}}7.1小程序模块化开发3自定义组件自定义组件案例：components\custom-comp
onent.wxmlwx:key="this">我是第{{item}}项p="addItem">adddelcustom-component>7.1小程序模块化开发3自定义组件自定义组件案例：components\custom-com
ponent.wxss.list{text-align:center;background-color:#ccc;bo
rder-top:1rpxsolid#fff;}7.1小程序模块化开发3自定义组件自定义组件案例：components\
custom-component.jsComponent({data:{list:[1,2,3,4,5]},m
ethods:{addItem:function(){…},delItem:function(){…}}})7.
1小程序模块化开发3自定义组件自定义组件案例：pages/index/index.wxmlpages/index/index.
json{"usingComponents":{"list":"/components/custom-component"
}}7.1小程序模块化开发4插件打开微信开发者工具，创建一个插件项目：components\cus
tom-component.jsComponent({data:{list:[1,2,3,4,5]},metho
ds:{addItem:function(){…},delItem:function(){…}}})7.1小程
序模块化开发4插件插件配置文件：plugin/index.jsplugin/plugin.json{"publicCompon
ents":{"list":"components/list/list"},"main":"index.js"}var
data=require(''./api/data.js'')module.exports={getData:data.
getData,setData:data.setData}7.1小程序模块化开发4插件插件使用配置过程：miniprogr
am/app.jsonminiprogram/pages/index/index.json{"pages":["pages/
index/index"],“plugins”:{…}}}{"usingComponents":{"list":"
plugin://myPlugin/list"}}7.1小程序模块化开发4插件在页面中使用插件：miniprogram/pa
ges/index/index.wxmlvarplugin=requirePlugin("myPlugin")Page({o
nLoad:function(){plugin.getData()}})miniprogram/pages/index/ind
ex.js7.2小程序基础样式—WeUI1初识WeUIWeUI使用流程：下载WeUI查看样式效果引入样式文件7
.2小程序基础样式—WeUI2【案例】电影信息展示WeUI中navbar实现导航栏效果：导航栏wxml导航栏jsdata:{
tabs:[''正在热映'',''搜索'',''分类''],activeIndex:0, …},tabClick:function
(e){},x:for-items="{{tabs}}"wx:key="{{index}}">…
7.2小程序基础样式—WeUI2【案例】电影信息展示正在热映页面效果图展示：7.2小程序基础样式—WeUI2【案例】电影信
息展示正在热映wxml正在热映jscontents:[…],poster:''http://xxx/xxx.jpg''class="weui-panelweui-panel_access">">电影列表…7.2小程序
基础样式—WeUI2【案例】电影信息展示搜索页面效果展示：7.2小程序基础样式—WeUI2【案例】电影信息展示搜索页面效果展
示：搜索框下方热搜词-bar__form">…
7.2小程序基础样式—WeUI2【案例】电影信息展示搜索页面效果展示：正在热映热搜词eui-flex">…lass="weui-flex">7.2小程序基础样
式—WeUI2【案例】电影信息展示分类页面效果展示：7.2小程序基础样式—WeUI2【案例】电影信息展示正在热映热搜词gri
ds:[''爱情'',''剧情'',''喜剧'',''家庭'',''动画'',''文艺'',''战争'',''动作'',''科幻''],class="">…<
/block>7.3使用Vue.js开发小程序1初识mpvuempvue在技术开发上的一些能力：彻底的组件化开发
能力，提高代码复用性。完整的Vue.js开发体验。方便的Vuex数据管理方案，方便构建复杂应用。快捷的webpack构建机制。支持
使用npm外部依赖。使用Vue.js命令行工具vue-cli快速初始化项目。H5代码转换编译成小程序目标代码的能力。7.3使用V
ue.js开发小程序2开发工具mpvue进行开发前的准备工作：检查开发环境。安装vue-cli脚手架工具。初始化微信小程序项目。
安装依赖。启动项目。预览小程序。7.3使用Vue.js开发小程序3项目结构查看项目目录结构：dist：小程序运行代码目录。sr
c：源代码目录。package.json：依赖配置文件。config：配置文件。project.config.json：项目配置文
件。7.3使用Vue.js开发小程序3项目结构查看项目目录结构：src/components：组件目录。src/pages：页
面目录。src/App.vue：主组件。src/app.json：小程序配置文件。src/main.js：入口文件。7.3使用V
ue.js开发小程序4【案例】计数器计数器效果展示图：启动firstapp小程序单击“去往Vuex示例页面”单击页面“+”和“-
”7.3使用Vue.js开发小程序4【案例】计数器注意需要注意的是，微信开发者工具会提示不支持打开此类文件，此时可以更换其他代
码编辑器（如SublimeText）来打开。7.3使用Vue.js开发小程序4【案例】计数器计数器代码实现：index.vu
e代码7.3使用Vue.js开发小
程序4【案例】计数器计数器功能实现流程：在vuex中记录state下的count值；moutations中注册increment
和decrement事件；组件绑定increment和decrement事件处理函数；通过computed属性将最终值展示到页面；
7.4小程序组件化开发框架1初识WePYWePY框架特征：类Vue开发风格；支持自定义组件开发；支持引入npm包；支持Prom
ise；支持ES2015+特性；7.4小程序组件化开发框架1初识WePYWePY框架特征：支持多种编译器；支持多种插件处理；支
持Sourcemap，ESLint等；小程序细节优化；7.4小程序组件化开发框架2开发工具WePY框架开发微信小程序前的准备
工作：检查开发环境。安装wepy-cli。生成Demo项目。安装依赖。开启实时编译创建wepy小程序7.4小程序组件化开发框架2
开发工具预览WePY小程序Demo案例项目：7.4小程序组件化开发框架3项目结构WePY项目结构图：7.4小程序组件化开发
框架3项目结构WePY项目目录介绍：dist：小程序运行代码目录。src：源代码目录。package.json：依赖配置文件。w
epy.config.js：WePY配置文件。project.config.json：项目配置文件。7.4小程序组件化开发框架3
项目结构WePY项目目录介绍：components：WePY组件目录。pages：WePY页面目录。index.wpy：i
ndex页面。app.wpy：入口文件。7.4小程序组件化开发框架3项目结构WePY项目目录app.wpy入口文件：app.w
pyimportwepyfrom''wepy'';……exportdefaultclassextendswepy.app
{config={"pages":[],"window":{}}globalData={}onLaunch(){
console.log(this);}7.4小程序组件化开发框架3项目结构WePY项目目录首页index.wpy页面：in
dex.wpyimportwepyfrom''wepy'';exportdefaultclassPageextends
wepy.page{…}te>…7.4小程序组件化开发框架3项目结构页面继承了wepy.page
类，其中Page实例的属性：标签功能config页面配置对象，对应于原生的“页面.json”文件components页面组件列表对
象，声明页面所引入的组件列表data页面渲染数据对象，存放可用于页面模板绑定的渲染数据methodswxml事件处理函数对象，存放
相应wxml中所捕获到的事件的函数，如bindtap、bindchangeeventsWePY组件事件处理函数对象，存放相应组件之
间通过$broadcast、$emit、$invoke所传递的事件的函数其他小程序页面生命周期函数，如onLoad、onReady
等，以及其他自定义的方法与属性7.4小程序组件化开发框架4【案例】商品展示WePY框架搭建小程序效果展示图：7.4小程序组件
化开发框架4【案例】商品展示注意需要在配置完成的框架进行代码编写和编译。7.4小程序组件化开发框架4【案例】商品展示创建in
dex.wpy文件，template组件使用：index.wpy