1、第7章 小程序开发框架小程序模块化开发使用vue.js开发小程序小程序基础样式库小程序组件化开发框架学习目标掌握掌握掌握掌握掌握小程序模块化开发12掌握WeUI的特点和简单使用3掌握WePY特点和简单使用4掌握mpvue特点和简单使用目录点击查看本节相关知识点点击查看本节相关知识点小程序基础样式库7 7.2.27 7.1.1小程序模块化开发点击查看本节相关知识点7 7.3.3使用vue.js开发小程序点击查看本节相关知识点7.47.4小程序组件化开发框架知识架构7.1 小程序模块化开发小程序模块化开发1模块2模板3自定义组件4插件知识架构7.2 小小程序基础样式库程序基础样式库weUI1初识W
2、eUI2【案例】电影信息展示知识架构7.3 使用使用vue.js开发小程序开发小程序1初识mpvue2开发工具3项目结构4【案例】计数器知识架构7.4 小程序组件化开发小程序组件化开发1初识WePY2开发工具3项目结构4【案例】商品展示7.1 小程序模块化开发 模块模块的定义和使用：module.exports=welcome:welcomevar welcome=require(./utils/welcome.js)Page(data:,onLoad:function()定义使用注意注意需要注意的是，path路径不可以使用绝对路径，否则会报错，应该使用相对路径。7.1 小程序模块化开发 模块
3、7.1 小程序模块化开发 模板模板的定义和使用：index:msg Time:time Page(data:item:index:0,msg:this is a template,time:2019-01-15)定义使用7.1 小程序模块化开发 模板template组件组件is属性：is属性注意注意需要注意的是，模板拥有自己的作用域，只能使用data传入的数据以及模版定义文件中定义的 模块。7.1 小程序模块化开发 模板7.1 小程序模块化开发 自定义组件自定义组件创建：Component(properties:value:type:String,value:default value,dat
4、a:hello:欢迎,methods:)component-tag-name.js component:truecomponent-tag-name.json7.1 小程序模块化开发 自定义组件自定义组件结构和样式：hello valuecomponent-tag-name.wxml.red color:red;component-tag-name.wxss7.1 小程序模块化开发 自定义组件自定义组件使用：usingComponents:my-component:/components/component-tag-name index.json 示例内容 index.wxml7.1 小程序模
5、块化开发 自定义组件自定义组件案例：我是第item项 add delcomponentscustom-component.wxml7.1 小程序模块化开发 自定义组件自定义组件案例：.list text-align:center;background-color:#ccc;border-top:1rpx solid#fff;componentscustom-component.wxss7.1 小程序模块化开发 自定义组件自定义组件案例：Component(data:list:1,2,3,4,5,methods:addItem:function(),delItem:function()compo
6、nentscustom-component.js7.1 小程序模块化开发 自定义组件自定义组件案例：usingComponents:list:/components/custom-component pages/index/index.jsonpages/index/index.wxml7.1 小程序模块化开发 插件打开微信开发者工具，创建一个插件项目：Component(data:list:1,2,3,4,5,methods:addItem:function(),delItem:function()componentscustom-component.js7.1 小程序模块化开发 插件插件配
7、置文件：publicComponents:list:components/list/list ,main:index.jsplugin/plugin.jsonvar data=require(./api/data.js)module.exports=getData:data.getData,setData:data.setDataplugin/index.js7.1 小程序模块化开发 插件插件使用配置过程：pages:pages/index/index ,“plugins”:miniprogram/app.json usingComponents:list:plugin:/myPlugin/l
8、ist miniprogram/pages/index/index.json7.1 小程序模块化开发 插件在页面中使用插件：miniprogram/pages/index/index.wxmlvar plugin=requirePlugin(myPlugin)Page(onLoad:function()plugin.getData()miniprogram/pages/index/index.js7.2 小程序基础样式WeUI 初识WeUIWeUI使用流程使用流程：下载WeUI 查看样式效果 引入样式文件7.2 小程序基础样式WeUI 【案例】电影信息展示WeUI中navbar实现导航栏效果：
9、导航栏wxmldata:tabs:正在热映,搜索,分类,activeIndex:0,tabClick:function(e),导航栏js7.2 小程序基础样式WeUI 【案例】电影信息展示正在热映页面效果图展示：7.2 小程序基础样式WeUI 【案例】电影信息展示 电影列表 正在热映wxmlcontents:,poster:http:/xxx/xxx.jpg正在热映js7.2 小程序基础样式WeUI 【案例】电影信息展示搜索页面效果展示：7.2 小程序基础样式WeUI 【案例】电影信息展示搜索页面效果展示：搜索框下方热搜词 正在热映热搜词7.2 小程序基础样式WeUI 【案例】电影信息展示搜索
10、页面效果展示：7.2 小程序基础样式WeUI 【案例】电影信息展示分类页面效果展示：正在热映热搜词7.2 小程序基础样式WeUI 【案例】电影信息展示grids:爱情,剧情,喜剧,家庭,动画,文艺,战争,动作,科幻,mpvue在技术开发上的一些能力在技术开发上的一些能力：p 彻底的组件化开发能力，提高代码复用性。p 完整的Vue.js开发体验。p 方便的Vuex数据管理方案，方便构建复杂应用。p 快捷的webpack构建机制。p 支持使用npm外部依赖。p 使用Vue.js命令行工具vue-cli快速初始化项目。p H5代码转换编译成小程序目标代码的能力。7.3 使用Vue.js开发小程序 初
11、识mpvuempvue进行开发前的准备工作进行开发前的准备工作：检查开发环境。安装vue-cli脚手架工具。初始化微信小程序项目。安装依赖。启动项目。预览小程序。7.3 使用Vue.js开发小程序 开发工具查看项目目录结构查看项目目录结构：p dist：小程序运行代码目录。p src：源代码目录。p package.json：依赖配置文件。p config：配置文件。p project.config.json：项目配置文件。7.3 使用Vue.js开发小程序 项目结构查看项目目录结构查看项目目录结构：p src/components：组件目录。p src/pages：页面目录。p src/Ap
12、p.vue：主组件。p src/app.json：小程序配置文件。p src/main.js：入口文件。7.3 使用Vue.js开发小程序 项目结构计数器效果展示图计数器效果展示图：启动firstapp小程序 单击“去往Vuex示例页面”单击页面“+”和“-”7.3 使用Vue.js开发小程序 【案例】计数器注意注意需要注意的是，微信开发者工具会提示不支持打开此类文件，此时可以更换其他代码编辑器（如Sublime Text）来打开。7.3 使用Vue.js开发小程序 【案例】计数器计数器代码实现：7.3 使用Vue.js开发小程序 【案例】计数器import store from./store
13、export default,methods:index.vue代码计数器功能实现流程计数器功能实现流程：在vuex中记录state下的count值；moutations中注册increment和decrement事件；组件绑定increment和decrement事件处理函数；通过computed属性将最终值展示到页面；7.3 使用Vue.js开发小程序 【案例】计数器WePY框架特征框架特征：p 类Vue开发风格；p 支持自定义组件开发；p 支持引入npm包；p 支持Promise；p 支持ES2015+特性；7.4 小程序组件化开发框架 初识WePYWePY框架特征框架特征：p 支持多种
14、编译器；p 支持多种插件处理；p 支持 Sourcemap，ESLint等；p 小程序细节优化；7.4 小程序组件化开发框架 初识WePYWePY框架框架开发微信小程序前的准备工作：p 检查开发环境。p 安装wepy-cli。p 生成Demo项目。p 安装依赖。p 开启实时编译p 创建wepy小程序7.4 小程序组件化开发框架 开发工具预览WePY小程序Demo案例项目：7.4 小程序组件化开发框架 开发工具WePY项目结构图：7.4 小程序组件化开发框架 项目结构WePY项目目录介绍：p dist：小程序运行代码目录。p src：源代码目录。p package.json：依赖配置文件。p w
15、epy.config.js：WePY配置文件。p project.config.json：项目配置文件。7.4 小程序组件化开发框架 项目结构WePY项目目录介绍：p components：WePY组件目录。p pages：WePY页面目录。p index.wpy：index页面。p app.wpy：入口文件。7.4 小程序组件化开发框架 项目结构WePY项目目录app.wpy入口文件：7.4 小程序组件化开发框架 项目结构import wepy from wepy;export default class extends wepy.app config=pages:,window:globa
16、lData=onLaunch()console.log(this);app.wpyWePY项目目录首页index.wpy页面：7.4 小程序组件化开发框架 项目结构import wepy from wepy;export default class Page extends wepy.page index.wpy页面继承了wepy.page类，其中Page实例的属性：7.4 小程序组件化开发框架 项目结构标签标签功能功能config页面配置对象，对应于原生的“页面.json”文件components页面组件列表对象，声明页面所引入的组件列表data页面渲染数据对象，存放可用于页面模板绑定的渲染
17、数据methodswxml事件处理函数对象，存放相应wxml中所捕获到的事件的函数，如bindtap、bindchangeeventsWePY组件事件处理函数对象，存放相应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数其他小程序页面生命周期函数，如onLoad、onReady等，以及其他自定义的方法与属性WePY框架搭建小程序效果展示图：7.4 小程序组件化开发框架 【案例】商品展示7.4 小程序组件化开发框架 【案例】商品展示注意注意需要在配置完成的框架进行代码编写和编译。7.4 小程序组件化开发框架 【案例】商品展示 index.wpy创建index.wpy
18、文件，template组件使用：7.4 小程序组件化开发框架 【案例】商品展示.wrapShop border:1rpx solid#ccc;margin-top:-1rpx;display:flex;flex-direction:row;align-items:center;height:278rpx;.info margin-left:30rpx;index.wpy创建index.wpy文件，style标签区域编写样式代码：7.4 小程序组件化开发框架 【案例】商品展示import wepy from wepyimport Panel from/components/panel export default class Index extends wepy.page config=navigationBarTitleText:商品展 components=panel:Panel data=list:index.wpy创建index.wpy文件，script区域编写js代码：本章总结本章主要讲解了小程序的模块化开发和各种框架的使用。通过本章的学习，读者应掌握如何在小程序中进行模块化开发，提高代码的可复用性；了解小程序开发中常用的一些框架和库的特点，熟悉WeUI库、mpvue框架、WePY框架的基本使用。
