小程序随笔

很久没写过笔记一类的东西了，从刚开始的996持续半年，直到最近，刚好这几天有空，顺便总结一下开发小程序的一些心路历程。

 

在这里呢顺便打个广告，小程序名字叫“一拍即传”。

 

最近半年多呢一直在开发小程序，其实小程序跟传统的web开发是极其相似的，当然也有不少不同的点，接下来 进入正题：

一开始学习小程序的第一步当然是看官方文档咯。

首先 先说说结构部分，结构部分的代码 当然跟传统的H5语法一样

在这里，H5 与 小程序的相同点 与 不同点，想必作为前端也一目了然了，同样的语法，不同的标签，比如图中 view 标签类似于 H5里面的div标签。

text标签 类似于 span一类的 常用的放置文案的标签。 image相当于强化版的img标签。

当然从图中，观众朋友们也能看到 除了标签不一样以外，有的标签上的属性 也是H5中没有的，例如image上面的 mode ，用于规定图片填充和裁剪的方式。

hidden =“{{something}}”  是否隐藏此元素，somthing为true时隐藏。变量通过{{}}括起来，使用过某某前端框架的朋友看见这种语法是不是很熟悉呢？

再比如 view上的 hover-class 点击态样式， 在这里就不具体挨个赘述了，文档上有很详细的描述，一个点举一个例子就行了。

view 上的 bindtap 当然顾名思义了 绑定点击事件。

 

js部分：

import {something} from "where"   //  这个大家一定很熟悉了

Page（{

　　data:{//data里的变量可直接绑定到页面结构上，理同上图中的errorView

　　　　something:''，

　　　　errorView:false

　　}

　　//下面是页面所需要用到的方法

　　onLoad(){

　　　　//to do something

　　　　this.setData({
　　　　　　something:'我是页面所需的数据，可同过setData来修改'
　　　　})

　　}

　　todosomething(){
　　　　let test = 222
　　}

}）

 

在上面中的 onLoad 大家肯定注意到了，接下来看看小程序的生命周期：

onLaunch：小程序初始化

onLoad： 页面加载时

onReady：页面渲染完成时 (我个人在项目中的使用频率不高)

onShow：页面显示时

onHide：页面隐藏时

onUnload：页面卸载时

在这里呢 有的盆友可能有些疑问，onShow 和 onLoad 的区别？ 

在第一次进入A页面时，onLoad onReady onShow 都会执行

在实际业务场景下，经常存在从下一个页面，返回到上一个页面的情况。

wx.navigateTo(OBJECT)：保存当前页面，跳转到小程序内某个页面  //使用频率较高

注意了：通过navigateTo是会保存当前页面的，当A->B 再从B->A回来的时候  就会执行 onShow里面的代码 而不会执行onLoad里面的代码。

通常情况下 onLoad 经常伴随着 onShow，但 onShow的时候 onLoad不一定会触发。

 

样式部分：

与传统的css 几乎没有差别，当然，单位上的使用还是有差异的  -----rpx（rpx的具体意思 请查阅官方文档）

文件结构：

上图有个home.json

微信小程序是可以修改小程序的标题栏样式（例如背景色，字体色） 页面名称的，甚至包括是否允许下拉刷新行为

 

app.json

是对整个小程序全局的一些配置

{ 　　//对于要使用的页面必须注册
　　"pages": [
　　"pages/home/home",
　　"pages/login/login"
　　],
　　"window": {　　//设置默认页面的窗口表现
　　"backgroundTextStyle": "#FFF",　　//下拉背景字体、loading 图的样式
　　"navigationBarBackgroundColor": "#FFF",　　//背景
　　"navigationBarTitleText": "一拍即传",　　//导航栏标题文字内容
　　"navigationBarTextStyle": "black",　　//导航栏标题颜色
　　"onReachBottomDistance": "500",　　//页面上拉触底事件触发时距页面底部距离，单位为px
　　"enablePullDownRefresh": false 　　//设置下拉刷新
　　},
　　"networkTimeout": {
　　"request": 20000, 　　//wx.request的超时时间，单位毫秒，默认为：60000
　　"connectSocket": 20000,　　//wx.connectSocket的超时时间，单位毫秒，默认为：60000
　　"uploadFile": 20000,　　//wx.uploadFile的超时时间，单位毫秒，默认为：60000
　　"downloadFile": 60000　　//wx.downloadFile的超时时间，单位毫秒，默认为：60000
　　}
}

 

 

测试部分：

测试时，各位同学请注意，如果你的代码在电脑上的微信工具上测的时候，什么问题都没有，别急着高兴。

因为这只能说明大概/可能/也许是没有问题的，maybe ~~~！

为什么？ 因为微信小程序到现在来说虽然比以前有很多改善，但仍然不完美，存在很多bug，要测试，必须在真机上测试跑通整个流程，并且！ 要安卓和IOS的手机都要测， 由于微信小程序本身的一些原因 以及一些兼容问题，可能会导致同一套代码、样式 在不同的平台 不同的手机看到的真机效果可能不一样（少数情况），有的是可以通过 尝试其他办法可以避免，有的则没法避免。

举个栗子：

在安卓上，很多应用都有用户头像 并且是圆角的，很多时候UI给的图 是方的，通过我们设置圆角border-radius
来达到圆图的效果，在这种情况下，安卓手机上 首次进入页面时，设置过border-radius的图片，在加载时 是方的，渲染完成后是圆的，四个角会闪一下，这个过程大概在0.4s左右。

再来一个栗子 0.0:

小程序里可以通过 wx.makePhoneCall(OBJECT)拨打电话，在3个月前，华为手机上无效，其他手机就没有问题，而这种情况在电脑上的微信工具上是模拟测试不出来的。

再再来个栗子：

小程序里面有一些原生组件，且层级比较高，在布局时，我们前端得自己注意。提醒大家注意且卖个关子：textarea组件是个好东西

 

温馨提示：

在查看官方文档时，一定要看！仔！细！ bug&tiips 一般官方都写在 每个部分说明的  最最最下边！

有时候，当你因为“BUG” 头疼时，这些tips有可能会是罪魁祸首。

 

以上都是小程序 传统的写法 和一些点，可能写的不仔细，谁叫我不是专业的写手（为自己找理由），具体的很多小程序的特色特性，盆友们可以查查官网文档，在这里就不一一赘述了。

 

最后本着买一送一的原则，再唠最后几句关于小程序框架的。

 

最近我们项目组刚把小程序重构了一遍，使用的是WEPY，与小程序原生写法不同的是，wepy是一种类vue、强组件的框架，对于前端来说写起来很友好，因为它很“*”，看图见真相：

 

本着取长补短的意思，我们小程序很多页面是由N多个组件组成。wepy由于还很年轻，所以伴随的BUG也是一堆堆的，尤其是在安卓上（没错！又是安卓）。

在安卓真机上，页面进行渲染时，非组件的结构渲染完成只是一瞬间，而封装的组件，快的时候0.N秒慢的时候1-2S也是有可能的。

目前经过初步排查，可能不是组件渲染的问题，封装组件的结构和样式跟 非封装组件（小程序组件）都是正常情况下同时渲染出来，但组件里面的字段/文案需要很长时间才能渲染出来，而文案是通过传值动态设置的。所以目前原因初步认为与组件传值有关（时间紧迫，没有深挖）。

 

 

以上内容，抽空随笔的心得，可能写的不够仔细（时间也不多啊，程序猿 你懂的...），原创码(lei)字(a)，不喜勿喷！