- 工程化的概念
- 工程化API封装 【重点】30%
- 工程化组件封装 【重点】30%
- 小程序路由【重点】30%
- 上架
- 小程序分包【重点】10%
1. 工程化的概念
在开发小程序时，需要将自己的代码进行封装，命名要规范，位置要规范，以达到代码复用，可以大量生产的效果
2. request三层封装
对 wx.request() 发请求的API进行三层封装
2.1 工具函数层
utils/request.js 对 wx.request进行封装
//封装第一层，对wx.request进行封装
const baseURL="http://www.look518.com";const request = (options) => {return new Promise((resolve, reject)=>{wx.request({...options,url: baseURL + options.url,success(res){//将异步操作的结果通过resolve传递出去resolve(res)},fail(err){//将失败的信息传递出去reject(err)}})})
}module.exports = request;
2.2 接口函数层
api/film.js 对接口进行封装
//封装第二层，对接口进行封装
const request = require('../utils/request.js');//获取电影列表
const getList = (data)=>{return request({method:'get',url:'/api/film.php?a=list',data,})
}module.exports={getList,
}
2.3 应用层
在 index.js 页面逻辑上进行调用
let {getList}=require('../../api/film.js');async onLoad(){let res=await getList({page:1, pagesize:5})console.log(res.data.data);
}
3. 自定义组件【重点】
3.1 创建和使用组件
第一步：创建组件
新建 components 文件夹，在里面新建组件文件夹，再点 鼠标右键 => “新建 Component”
在 .wxml 中写组件的内容
第二步：使用组件
在 index.json 中注册组件
"usingComponents": {"my-button":"../../components/my-button/my-button"
}
在 index.wxml 中使用组件
<my-button></my-button>
3.2 组件的生命周期
组件的生命周期写在 .js 中的 lifetimes 属性中
//生命周期函数
lifetimes:{created(){console.log('1. 组件创建了')},attached(){console.log('2. 组件渲染完成了')},detached(){console.log('3. 组件被干掉了');}
}
3.3 参数父传子
将父组件的数据传递给子组件
第一步：在父组件中设置自定义属性，将数据传递给子组件
<!-- 数据父传子 -->
<my-button txt="普通按钮"></my-button>
<my-button txt="马上注册新会员"></my-button>
<my-button></my-button>
第二步：在子组件中接收数据
properties: {txt:{type:String, #数据类型value:'我是按钮', #默认值},...
},
3.4 参数子传父
将子组件的数据传递给父组件
第一步：在子组件中触发自定义事件，并传参数
//数据子传父
this.triggerEvent('toFather', this.data.num)
第二步：在父组件中使用子组件时，设置自定义事件，接收参数
<my-button txt="普通按钮" bind:toFather="getData"></my-button>//接收子组件传回的数据
getData(obj){console.log(obj.detail);
},
4. 小程序的路由【重点】
4.1 配置路由
在 app.json 全局配置中配置路由
"pages": ["pages/index/index","pages/list/list"
],
4.2 配置 tabBar
在 app.json 全局配置中，可以添加 tabBar 实现底部导航
"tabBar": {"list": [{"pagePath": "pages/index/index","iconPath":"images/home1.png","selectedIconPath": "images/home2.png","text": "首页"}, {"pagePath": "pages/list/list","text": "列表"}, {"pagePath": "pages/news/news","text": "新闻"}]
},
4.3 路由的API
switchTab切换tab，只能切换出现在 tabBar 上面的页面
wx.switchTab({url:'/pages/list/list'})
reLaunch，清空全部页面，跳转到指定的页面
wx.reLaunch({url: '/pages/list02/list02'})
redirectTo，关闭当前页面，跳转到指定的页面
wx.redirectTo({url: '/pages/list02/list02'})
navigateTo，保留当前页面，跳到下一个页面
wx.navigateTo({url: '/pages/list01/list01'})
navigateBack，后退一个页面
wx.navigateBack()
5. 小程序上架
小程序上架必须按公众平台的上线流程，完成每一个步骤
第一步：完善信息
第二步：开发小程序
第三步：上传到微信服务器， 开发版本 》 审核版本 》 上线版本
注意：不要上传demo，即使上传了demo也不要提交审核
6. 小程序分包
小程序单包大小限制为 2M，如果开发的项目大于2M就需要分包
第一步：配置 app.json ，添加子包的设置
"subpackages": [{"root":"pageA", "pages":["index/index"]},{"root":"pageB", "pages":["home/home"]}
],
第二步：在主包中跳转过去
第三步：上传
注意事项：
tabBar页面必须在主包内subpackage的根目录不能是另外一个subpackage内的子目录- 每个子包是独立的，相互之间不能访问，但是每一个子包都可以访问主包的数据
)
)
