织梦做商城类网站教程,网站网络营销推广,idc网站模板下载,国外自适应网站模版工程化的概念工程化API封装 【重点】30%工程化组件封装 【重点】30%小程序路由【重点】30%上架小程序分包【重点】10%
1. 工程化的概念
在开发小程序时#xff0c;需要将自己的代码进行封装#xff0c;命名要规范#xff0c;位置要规范#xff0c;以达到代码复用#xf…工程化的概念工程化API封装 【重点】30%工程化组件封装 【重点】30%小程序路由【重点】30%上架小程序分包【重点】10%
1. 工程化的概念
在开发小程序时需要将自己的代码进行封装命名要规范位置要规范以达到代码复用可以大量生产的效果
2. request三层封装
对 wx.request() 发请求的API进行三层封装
2.1 工具函数层
utils/request.js 对 wx.request进行封装
//封装第一层对wx.request进行封装
const baseURLhttp://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?alist,data,})
}module.exports{getList,
}2.3 应用层
在 index.js 页面逻辑上进行调用
let {getList}require(../../api/film.js);async onLoad(){let resawait 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-button3.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:toFathergetData/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 内的子目录每个子包是独立的相互之间不能访问但是每一个子包都可以访问主包的数据
