- 工程化的概念
- 工程化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"]}
],
第二步：在主包中跳转过去
第三步：上传文章来源：https://www.toymoban.com/news/detail-634801.html
注意事项：文章来源地址https://www.toymoban.com/news/detail-634801.html
-
tabBar页面必须在主包内 -
subpackage的根目录不能是另外一个subpackage内的子目录 - 每个子包是独立的，相互之间不能访问，但是每一个子包都可以访问主包的数据
到了这里，关于小程序request三层封装和分包以及路由和组件传参的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
