小程序开发经验总结
2020/3/18 11:01:32
本文主要是介绍小程序开发经验总结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、WXML
1.1:wx:if与wx:else
前端通过后端的接口获取信息列表,如果有数据则展示数据内容,否则则显示找不到信息。 如果if-else使用布尔值的状态作这个开关的话,页面会先出现false的状态,再更新为true,即闪现找不到信息的内容,这种交互不是很理想。
<view wx:if="{{true}}"> <text>这是信息列表</text> </view> <view wx:else> <text>找不到信息</text> </view> 复制代码
最好的做法是使用下面这种,一开始设置info为null,
data:{ info:null } 复制代码
<view wx:if="{{info === 1}}"> <text>这是信息列表</text> </view> <view wx:if="{{info === 0}}"> <text>找不到信息</text> </view> 复制代码
1.2:wx:for
for循环要添加wx:for-item="item" wx:key="item"
1.3:block标签
wx:if、wx:for、wx:else这些没有样式意义的语法尽量使用block
1.4:template组件模板
公共的页面模块/组件,可直接在wxml使用,也可以使用import方式。如果涉及到css,需要在wxss里@import引入。
/** * 方式一:直接使用 * 1. 给template 设置name属性 * 2. 组件传过来的值可以直接使用 hidden="{{!isloading}}" */ <template name="loading"> <view class="weui-loadmore" hidden="{{!isloading}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在加载</view> </view> </template> /** * 方式二:按路役引入 * 1. is 等同方式一的name * 2. data="{{isloading}}" 给template的数据 */ <import src="../template/loading.wxml"/> <template is="loading" data="{{isloading}}"></template> 复制代码
1.5:脚本语言wxs
专门运行于wxml页面的脚本语言,与javascript不同,不支持使用ES6语法,也不能引用js。
<wxs module="wxs" src="../../utils/wxs.wxs"></wxs> 复制代码
module.exports = { //输出百分比 formatProgress: function (c,m) { return c/m*100 } } 复制代码
二、WXSS
2.1:背景Icon
小程序的 background 里只能使用完整的https图片路径,项目中使用icon的方式:
- 矢量图svg:具备完美的可伸缩性,容易进行调整(颜色、大小等);
- data-uri:图片体积小于20Kb使用base64方式。[前端图片最优化的引入方式分析][segmentfault.com/a/119000001…]
- 较大文件:直接在wxml使用image标签
- 引入外部icon:如阿里巴巴矢量图库,可使用网络路径和下载到本地的方式来使用。
2.2:重置样式
2.3:font-family标准规范
font-family: /*西文:*/ -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial, /*中文:*/ PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif; 复制代码
参考文章:最标准的系统字体规范font-family
2.4:合理使用rpx单位
rpx 是一个相当于屏幕宽度百分比的相对单位,以下情况不建议使用:
- font-size和border-width;
- animation动画中涉及translate位移:部分机器在rpx转成px出现小数时,如262.89px,微信会向下取值为262px,产生1px的差距。
- canvas绘图,比如二维码、分享图片等。
三、JavaScript
3.1:二次封装wx.request方法
3.2:页面的生命周期
- onLoad: 页面加载,一个页面只会调用一次。能获得到页面参数options。
- onShow: 页面显示,每次打开页面都会调用一次,从后台切换前台也会调用一次:手机从熄屏切回显屏、从最小化回到最大化。
- onReady: 页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
- onHide: 页面切换到后台、navigateTo 、 tab 切换时调用。
- onUnload: 页面卸载。当页面被关闭或内存不足主动销毁页面。
3.3: new Date兼容性
安卓能识别new Date("2018-05-30 00:00:00")
格式,但在IOS只能识别2018/05/30 00:00:00
格式。需要将短横替换为斜杠。var iosDate= date.replace(/-/g, '/')
。
3.4:冒泡事件
- bindtap :事件绑定不会阻止冒泡事件向上冒泡
- catchtap:事件绑定可以阻止冒泡事件向上冒泡
四、小程序功能
4.1:canvas生成图片
4.2:插件的使用
4.3:页面栈限制
小程序的页面栈限制5个,超过5个之后无法进入下一个页面。
故要慎用页面数量,导航API要灵活结合wx.navigateTo、wx.redirectTo、wx.navigateBack
4.4:提示弹窗Dialog
- 代码前面使用wx.hideLoading会导致后面的wx.showToast出不来。因为wx.showToast具备隐藏wx.showLoading()提示框的功能。
-
五、其它
5.1:主流框架
- mpvue:使用vue语法规范编译成小程序和h5语法
- Taro:基于react可同时编译成小程序、h5、react-native等。
5.2:常用插件
- wxParse:富文本解析
- wx-charts:图表工具
- wxapp-qrcode:二维码生成器
这篇关于小程序开发经验总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践