小程序开发经验总结

·  阅读 1812

一、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:如阿里巴巴矢量图库,可使用网络路径下载到本地的方式来使用。

png本地压缩工具:Tinypng

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方法

使用promise方式二次封装

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生成图片

canvas多行文字及生成分享图片

4.2:插件的使用

小程序插件的使用

4.3:页面栈限制

小程序的页面栈最新版本限制为10个,超过10个之后无法进入下一个页面。

故要慎用页面数量,导航API要灵活结合wx.navigateTo、wx.redirectTo、wx.navigateBack

小程序页面10层限制的一种解决方案

4.4:提示弹窗Dialog

  • 代码前面使用wx.hideLoading会导致后面的wx.showToast出不来。因为wx.showToast具备隐藏wx.showLoading()提示框的功能。

五、其它

5.1:主流框架

  • mpvue:使用vue语法规范编译成小程序和h5语法
  • Taro:基于react可同时编译成小程序、h5、react-native等。

5.2:常用插件

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改