在线可以做翻译的网站,赣州建设网站公司,太原制作微信网站,淘宝客网站域名前言#xff1a;适用于有一定基础的前端开发同学#xff0c;完成从网页开发到小程序开发的知识转换。 先立框架#xff0c;后砌墙壁
回顾#xff1a;了解微信小程序开发流程-CSDN博客
初始页面结构#xff0c;三部分pages、utils、配置#xff0c;分别存放页面、工具类…前言适用于有一定基础的前端开发同学完成从网页开发到小程序开发的知识转换。 先立框架后砌墙壁
回顾了解微信小程序开发流程-CSDN博客
初始页面结构三部分pages、utils、配置分别存放页面、工具类函数、全局文件。 全局文件常用的三个app.js、app.json、app.wxss分别是项目入口、页面配置、全局样式
其余
.eslintrc配置规则集和插件用于检查代码质量规范编码的project.config个性化配置以及配置项目的打包后面挨着的project.private.config是他孪生兄弟可以覆盖前者配置sitemap小程序的结构和组织方式让微信可以搜索到该小程序 配置是基础优先掌握
一、配置
1、全局配置
在app.json中的全局配置参数常见的有
navigationBarTextStyle 顶部背景颜色只支持设置黑色和白色navigationBarTitleText 顶部全局标题即小程序名称enablePullDownRefresh下拉刷新onReachBottomDistance 上拉触底
小程序官网_页面配置对于字段的用法和含义写的很全面
2、新建页面
小程序页面分两种tabBar和非tabBartabBar就是最底下的导航栏
备注同样可参考小程序官网_全局配置
1.1 tabar页面 /***app.json****/
若要加新页面在pages和tabBar中添加地址、文本和图标即可
在pages里写了地址pages文件夹中会自动生成页面文件的
{pages: [pages/index/index,pages/shopping/shopping],tabBar: {list: [{pagePath: pages/index/index,text: 首页,iconPath: /images/tabs/index.png,selectedIconPath: /images/tabs/index-active.png},{pagePath: pages/shopping/shopping,text: 商城,iconPath: /images/tabs/shopping.png,selectedIconPath: /images/tabs/shopping-active.png}]}
}
1.2 非tabBar页面
就是直接点击即跳转的页面只需要在上面pages里新增个地址即可。
二、导航
1、声明式
1、跳转到tabBar页面
navigator url/pages/orderDetail/orderDetail open-typeseitchTab/navigator 2、到非tabBar页面区别仅在于open-type参数
navigator url/pages/orderDetail/orderDetail open-typenavigate/navigator 3、传参
只需要把参数拼接在url后面即可
navigator url/pages/orderDetail/orderDetail?test12price78传参/navigator
接收参数
在跳转到的页面的onload方法里可接受到传递来的参数
onLoad(options) {console.log(options);
},4、回退
(只在非tabBar页面生效)
delta代表回退层级默认为1
navigator open-typenavigateBack delta1/navigator
2、编程式
1、跳转到tabBar页
在页面wxml添加
小程序中 bindtap 就相当于 click
button bind:tapgotoHome跳转/button
在对于js文件中调用方法即可gotoHome(){wx.switchTab({url: /pages/index/index,})}2、跳转到非tabBar页面
只需要把switchTab换成navigateTo就行了
button bind:tapgoDetail详情/button
goDetail(){wx.navigateTo({url: /pages/orderDetail/orderDetail,})}3、传参
和声明式一样把参数拼接在url后面4、回退
参数为空则默认回退1层button bind:tapgoBack回退/buttongoBack(){wx.navigateBack()},
三、生命周期
分为2类应用生命周期和页面生命周期
类似于网页都是初始化-渲染显示-销毁 的过程不同点在于多了个周期onHide隐藏在后台运行
1、应用
在全局入口文件app.js中控制
App({/** * 当小程序初始化完成时会触发 onLaunch全局只触发一次 */onLaunch: function () {},/** * 当小程序启动或从后台进入前台显示会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台会触发 onHide */onHide: function () {},/*** 当小程序发生脚本错误或者 api 调用失败时会触发 onError 并带上错误信息*/onError: function (msg) {}
})
2、页面
在页面自己的文件夹下js文件中控制
Page({onLoad(options) {}, // 监听页面加载,一个页面只调用1次onReady() {}, // 监听页面初次渲染完成,一个页面只调用1次onShow() {}, // 监听页面显示onHide() {}, // 监听页面隐藏onUnload() {}, //-监听页面卸载//初始化时还会默认有下面几种监听事件onPullDownRefresh() {}, // 监听用户下拉动作onReachBottom() {}, // 页面上拉触底事件的处理函数onShareAppMessage() {} // 用户点击右上角分享
})
