1. 认识小程序
1.1 语言及开发工具
首先,小程序类Web,但不同于我所认识的HTML,他有属于自己的开发语言及工具:
JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中,不能操作 Browser context 下的 DOM,也不能通过 Node.js 相关接口访问操作系统 API。
WXML: 作为微信小程序的展示层,并不是使用 Html,而是自己发明的基于 XML 语法。
WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。”
小程序开发工具,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
1.2 入口文件
小程序主要包含以下三个入口文件:
app.js 这个文件是整个小程序的入口文件, 我们主要做了网络检测、用户信息获取等;当然也可以注入公用的方法在其他页面中去通过getApp()调用 (注:页面中调用app.js中的方法时不需要通过require或者import引入)
app.json 这个文件可以对小程序进行全局配置,决定页面文件的路径,整体窗口表现、设置网络超时时间、设置多tab等。
app.wxss 是小程序的公共样式表
2. 项目开发
2.1 生命周期
当然,微信小程序和其他前端框架类似也是有生命周期的:
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载(像首页数据请求可以放在这里)
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作(这里添加了下拉刷新的功能)
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {}
})
当我们在data中初始化的值需要修改时,可以在各生命周期及方法中通过setData()修改。由于小程序的入口页面就是首页,在首页添加了用户登录和网络状态的检测在onLoad中。
2.1 tabBar
tabBar即小程序的底部导航栏,由于微信的限制,最少2个最多5个导航栏,只可设置文案、图标。
2.3 样式
小程序样式采用WXSS语言(具有CSS大部分特性)。他也提供了一种新的单位rpx(可根据屏幕宽度自行适应)。官方规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素,既然这样我们也推荐了我们设计师采用iPhone6作为设计标准,即750px宽度。
但是在实际的开发过程中如果字体大小也使用rpx做单位的话,在iPhone6 Puls上显示文字过大,影响美观。后经过测试采用了px做单位,即原设计稿尺寸的一半+px,这样可以保证文字大小在各设备中保持一致。
2.4 网络状态
在官方文档上有明确规定,本地资源是无法通过CSS获取的,图片的话只能使用网络资源或base64方式。首页有个需要判断网络状态的需求,由于断网情况下无法获取网络资源,最后就使用了base64的方式。
官方获取网络状态的API是getNetworkType为异步接口,通过它的返回结果再进行下一步(是显示无网络还是调用数据列表接口),说到这里大家都知该怎么办了——Promise,具体封装如下
new Promise((resolve, reject) => {
let req = wx.getNetworkType({
success: function (res) {
var networkType = res.networkType;
if (networkType === 'none') {
resolve(false)
} else {
resolve(true)
}
},
fail() {
reject(false)
}
});
})
3. 调试
调试的时候最大的问题呢是:无论是开发者工具上还是手机上,记得先把缓存删干净再测。特别是开发者工具每次切换host都要清理缓存,再重新打开,而且出现bug的时候尽量多测几次,进行反复确定。不然的话,你可能会发现,本来测好的功能又出现问题了,或者是本来有问题的部分又没有问题了。
3.1 开发者工具
开发者工具调试界面和Chorem浏览的开发者工具类似,调试工具分为 7 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace。
3.2 真机调试
在开发环境下手机调试需要满足以下条件:
必须使用开发者账号微信打开
手机需要配置代理(常用charles或fiddler进行代理)
在开发者工具中:设置—代理—代理设置—手动设置代理(填写本机ip127.0.0.1,端口号:8888)
手机扫码(通过开发者工具预览生成二维码),点击右上角--打开调试手机上调试也可以有类似开发者工具一样的调试体验,可以看到Log、System、WeChat、WXML等,也可以看到页面的性能数据。总体来说还是挺齐全的。
————————————————
版权声明:本文为CSDN博主「hswwqy」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hswwqy/article/details/125473534
宽度三等分方法:
width:calc(100% / 3)
页面跳转:
tabBar页面 uni.navigateTo
非tabBar页面 uni.switchTab
页面一加载就能渲染的钩子函数:
onLoad()
v-if,v-for在uni.app中不冲突,可以在一个view中同时使用
关于分包:
我们可以将tabBar页面放在主包当中,非tabBar页面放在分包当中,创建分包的时候要在项目根目录中,创建分包的根目录。同时在pages.json中,和pages节点平级的位置声明新的节点,我们把新的节点叫做subpkg。结构如下:
{
"pages": [
{
"path": "pages/home/home",
"style": {}
},
{
"path": "pages/cate/cate",
"style": {}
},
{
"path": "pages/cart/cart",
"style": {}
},
{
"path": "pages/my/my",
"style": {}
}
],
"subPackages": [
{
"root": "subpkg",
"pages": []
}
]
}
关于指定商品页面跳转:
特有的商品跳转到特有的页面,根据商品的id来跳转,在goods_id上等于一个特有的值即可。
:url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id"