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…]
引入外部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;
2.4:合理使用rpx单位
rpx 是一个相当于屏幕宽度百分比的相对单位,以下情况不建议使用:
font-size和border-width;animation动画中涉及translate位移:部分机器在rpx转成px出现小数时,如262.89px,微信会向下取值为262px,产生1px的差距。
三、JavaScript
3.1:二次封装wx.request方法
3.2:页面的生命周期
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.2:插件的使用
4.3:页面栈限制
小程序的页面栈最新版本限制为10个,超过10个之后无法进入下一个页面。
故要慎用页面数量,导航API要灵活结合wx.navigateto、wx.redirectTo、wx.navigateBack
4.4:提示弹窗Dialog
五、其它
5.1:主流框架
5.2:常用插件
推荐教程:《微信小程序》
原文地址:https://www.jb51.cc/weapp/1201542.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。