前端-微信小程序开发(2):小程序基本介绍

作者:叶小钗  www.cnblogs.com/yexiaochai/p/9374374.html

前言

前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来:

【组件化开发】前端进阶篇之如何编写可维护可升级的代码(https://www.cnblogs.com/yexiaochai/p/4876099.html)(有些晦涩有些乱,但是对于整体了解小程序结构有帮助)

我们用小程序实现这里的代码,看看是个什么样的体验,另外我这里想保证代码最大程度重用,为后续一端代码四端运行做前驱探索。

页面复杂度还是比较高的,包括了:

① 弹出层

② 页面跳转

③ 缓存

④ 数据请求

⑤ 列表页、滚动分页

⑥ ……

我相信完成了这个例子,我们对小程序业务代码怎么写会有比较好的了解,于是让我们开始今天的代码吧。

小程序的布局

为什么不使用HTML&CSS

微信小程序这种平台型的超越Hybrid系统诞生还是有一些客观条件的,其中一个就是移动端的应用相对来说简单的多,想想PC负责的布局,如果要使用小程序实现,那么复杂度会提高很多。

小程序代码编写逻辑层依旧使用JS完成,但是结构层以及样式层推出了:

① WXML,Weixin Markup Language,是微信设计的一套标签语言,与HTML类似,做过React&Vue的同学会非常熟悉

② WXSS,WeiXin Style Sheets,是一套样式语言,用于定义样式,与CSS类似,一般认为是CSS的子集

因为小程序中UI组件都是Native实现,所以小程序直接手起刀落压根放弃让我们使用HTML容器,这样做我觉得有个好处是:

为了更好的限制,我之前也在做Hybrid乃至前端框架,一般来说我会限制到View级别的实习,要求必须按照我的规则做,但是因为入口为index.html文件,我甚至将全局控制器App的实例化放到了main.js里面,只提供了建议的做法,事实上HTML还是太过灵活,有些同事逐渐根本不按照我们的规则玩,他觉得他的做法更好,但是这样一来便会破坏了项目的总体性,后续的工程性的优化或者监控可能就不能帮助他了,从某个角度来说,我是认可小程序的做法的。

我们之前在这里研究过自定义标签的做法:从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

<article class="cm-page page-list" id="main">     <div class="js_sort_wrapper sort-bar-wrapper">         <mySortBar :entity="sortEntity"></mySortBar>     </div>     <myList :entity="listEntity" :sort="sort"></myList> </article>

从这个文章以及小程序的实现可以看出基本的概念:

① 标签的出现根本不是做标签用,而是为了让JS捕捉执行相关逻辑,最后生成真正的标签

② 为了做更好的限制,小程序根本不提供入口index.html文件了,所以这里的标签是用作JS做模板解析后生成Native能识别的代码,更具体点说是,Native实现了一个组件,组件有很多规则,可以使用JS去调用,正如我们这里的header组件调用逻辑(JS会设置Native的Header组件展示),这里如果不太清晰可以参考下这个文章:浅谈Hybrid技术的设计与实现第二弹

当然,小程序底层具体是不是这么做,我们不得而知,如果有小程序的同事,可以指导下:),至此,我觉得可以从技术层面说明为什么不直接使用HTML&CSS了:更好的业务限制 + 方便JS解析模板被Native执行。

小程序组件

我们之前做Hybrid应用的时候,事实上只提供了一个真正具有结构的组件Header,其他loading类的提示组件都比较简单,而我们看看小程序提供了哪些组件呢:

容器类组件

view&scroll-view&swiper等作为容器组件存在,这里官方有基本介绍,我们这里看看其中一个即可:

这里官方给了一个demo进行说明:

<view class="section">   <view class="section__title">flex-direction: row</view>   <view class="flex-wrp" style="flex-direction:row;">     <view class="flex-item bc_green">1</view>     <view class="flex-item bc_red">2</view>     <view class="flex-item bc_blue">3</view>   </view> </view> <view class="section">   <view class="section__title">flex-direction: column</view>   <view class="flex-wrp" style="height: 300px;flex-direction:column;">     <view class="flex-item bc_green">1</view>     <view class="flex-item bc_red">2</view>     <view class="flex-item bc_blue">3</view>   </view> </view>

@import "../lib/weui.wxss"; .page-section{   margin-bottom: 20rpx; } .flex-wrp {display: flex;} .bc_green {background: green;width:100px; height: 100px;} .bc_red {background: red;width:100px; height: 100px;} .bc_blue {background: blue;width:100px; height: 100px;}

可以将这个标签理解为div类组件。

swipe

一般来说,Native提供的轮播图体验要好得多,所以这里也提供了一个Native的组件:

<view class="container">   <view class="page-body">     <view class="page-section page-section-spacing swiper">       <swiper         indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"         interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">         <block wx:for="{{background}}" wx:key="*this">           <swiper-item>             <view class="swiper-item {{item}}"></view>           </swiper-item>         </block>       </swiper>     </view>     <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">       <view class="weui-cells weui-cells_after-title">         <view class="weui-cell weui-cell_switch">           <view class="weui-cell__bd">指示点</view>           <view class="weui-cell__ft">             <switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />           </view>         </view>         <view class="weui-cell weui-cell_switch">           <view class="weui-cell__bd">自动播放</view>           <view class="weui-cell__ft">             <switch checked="{{autoplay}}" bindchange="changeProperty" data-property-name="autoplay" />           </view>         </view>         <view class="weui-cell weui-cell_switch">           <view class="weui-cell__bd">衔接滑动</view>           <view class="weui-cell__ft">             <switch checked="{{circular}}" bindchange="changeProperty" data-property-name="circular" />           </view>         </view>         <view class="weui-cell weui-cell_switch">           <view class="weui-cell__bd">竖向</view>           <view class="weui-cell__ft">             <switch checked="{{vertical}}" bindchange="changeProperty" data-property-name="vertical" />           </view>         </view>       </view>     </view>     <view class="page-section page-section-spacing">       <view class="page-section-title">         <text>幻灯片切换时长(ms)</text>         <text class="info">{{duration}}</text>       </view>       <slider value="{{duration}}" min="500" max="2000" bindchange="changeProperty" data-property-name="duration" />       <view class="page-section-title">         <text>自动播放间隔时长(ms)</text>         <text class="info">{{interval}}</text>       </view>       <slider value="{{interval}}" min="2000" max="10000" bindchange="changeProperty" data-property-name="interval" />       <view class="page-section-title">         <text>前边距(px)</text>         <text class="info">{{previousMargin}}</text>       </view>       <slider value="{{previousMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="previousMargin" />       <view class="page-section-title">         <text>后边距(px)</text>         <text class="info">{{nextMargin}}</text>       </view>       <slider value="{{nextMargin}}" min="0" max="50" bindchange="changeProperty" data-property-name="nextMargin" />     </view>   </view> </view>

Page({   data: {     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],     indicatorDots: true,     vertical: false,     autoplay: false,     circular: false,     interval: 2000,     duration: 500,     previousMargin: 0,     nextMargin: 0   },   changeProperty: function (e) {     var propertyName = e.currentTarget.dataset.propertyName     var newData = {}     newData[propertyName] = e.detail.value     this.setData(newData)   },   changeIndicatorDots: function (e) {     this.setData({       indicatorDots: !this.data.indicatorDots     })   },   changeAutoplay: function (e) {     this.setData({       autoplay: !this.data.autoplay     })   },   intervalChange: function (e) {     this.setData({       interval: e.detail.value     })   },   durationChange: function (e) {     this.setData({       duration: e.detail.value     })   } })

有demo有代码,还是比较清晰。

movable-area

提供一个可以移动的区域,暂时没想到应用场景……

icon

图标,小程序这边还扩展了一下,给了很多默认的图标样式,能满足基本需求

text

文本

rich-text

富文本,用于展示文章,支持HTML,这里的nodes属性建议使用数组,类型,还不如系统自己解析js算了,因为不会有人像这样写代码(nodes看上去很蠢):

Page({   data: {     html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div><script>console.log(1)</script>',     nodes: [{       name: 'div',       attrs: {         class: 'div_class',         style: 'line-height: 60px; color: red;'       },       children: [{         type: 'text',         text: 'Hello&nbsp;World!'       }]     }]   },   tap() {     console.log('tap')   } })

progress

进度条

button

按钮

checkbox

选择框

form

表单相关

input

输入框,小程序的数据流动是单向的,每次数据更新,动态调用setData改变数据便会触发view更新,底层实现便不知道了;文本框值改变js需要自己去获取

label

与html一致,用以点击文字操作控件,主要用于文本框

picker&picker-view

用于级联操作

navigator&function-page-navigator

页面链接,这个组件感觉不利于跳转收口,建议少用

其他组件请大家直接到这里来看demo,非常清晰:

https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

总结

可以看出,小程序Native层是将常用的HTML标签分别都实现了一次,使用这些组件可以拼接处任何复杂的组件。至于样式方面,WXSS与CSS大同小异,其中主要区别是小程序没有使用px而是使用的rpx,这个类似于rem的实现,为了解决移动端的适配问题而存在,总而言之,你在iPhone6设计搞上是多少px就写成多少rpx就行,其余系统会帮你完成适配工作,这块透明做的很好,后续样式我们直接上实例即可。

小程序的生命周期

我们这里上一张图:

这张图不但真实反映了Page的生命周期,也将我们之前的猜想做了一个证明,解读这张图大概是这个意思(未必正确,如有错误请指出):

Native层在载入小程序时候,起了两个线程一个的view Thread一个是AppService Thread,我这边理解下来应该就是程序逻辑执行与页面渲染分离,也许是想优化性能,这里更具体一点的解释是(带有猜测了):微信会开一个webview来执行我们的JS逻辑,然后会开一个Native View UI执行页面渲染;两个部分是彼此独立的,页面点击时候触发事件,View线程会获取APPService服务线程(其实就是获取webview),执行其中的js逻辑;APPService执行js逻辑改变数据通过setData调用,触发一个JSCore通信,通知view线程执行UI更新,这里结合这张图做下理解:

① 微信打开一个小程序时,主UI线程继续运行,开启一个webview(我认为这里的主线程就是view Thread,webview就是APPService线程,这里可能有误)

② 主View等待构建页面命令,逻辑层开始载入js逻辑(编译过),微信底层应该会将WXML以及WXSS翻译为JS代码,逻辑层执行JS代码做一些初始化工作APP结束后,开始Page逻辑,而他这个图只有Page的逻辑,没有将app囊括进去,这里也引发了我一个疑惑:我在onLoad的时候打了个断点,而页面这个时候事实上已经进行了结构层的渲染,也就是说页面的WXML逻辑已经执行了:

如果要按照我现有的逻辑下做解释的话,我认为实例化Page的时候,执行了一个create事件,但是小程序并没有释放onCreate事件让我们做注册,所以我这里知识体系的基础依旧是:

JS逻辑先于Native UI 执行,页面渲染是由实例化Page时候发出

所以我觉得,这里的图好像少了一部分(或者说我理解是有问题的):

③ 业务线程执行实例化Page逻辑,引发onLoad、onShow事件,onShow的时候页面初步渲染已经结束,如果系统有异步数据或者其他再次数据渲染会执行setData,引发Native UI更新,逻辑结束

但是微信给出的图不可能是错的,而从图上看,首次异步通知是由View Thread发起的,我这里就很是困惑了?,因为我认为逻辑发起者一定是逻辑层的js发出通知

总结

今天我们对小程序进行了基本的了解学习,明天我们持续完成我们的demo吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

原生小程序和 mpvue对比(开发前)

开发者需要熟悉小程序的抒写格式,目前版本模板中支持 slot,但是不支持 npm 包。原生不支持 css 预处理器,但是 vsCode 中 Easy WXLES...

56830
来自专栏编程微刊

小程序列表左滑效果在IOS呈上下滑动影响样式

在实际开发中,很多时候,苹果手机对小程序不够友好,类似上图,在实现小程序列表左滑效果的时候,安卓手机上测试都很正常,也很流畅,但是在苹果手机上却会出现这样的bu...

21020
来自专栏微信小程序开发

借助公众号快速推广小程序

还不知道“如何获取小程序路径”的同学,可以先看这里:http://kf.qq.com/faq/180725biaAn2180725VnQjYF.html

29550
来自专栏罗超频道

字节跳动的游戏野心

2月18日,抖音上线了一款音乐节奏小游戏“音跃球球”,据罗超频道(欢迎关注微信luochaotmt)体验,该游戏可直接在抖音App中操作,以抖音神曲为背景音乐,...

53330
来自专栏微信小程序开发

你真的会玩儿小程序客服吗?

1、有些bug需要用户来反馈,不然,开发的同学会太自恋,会认为自己的代码是不会有bug的。但实际上了,可能是一坨屎… 2、用户会把自己的需求,反馈给客服,方便后...

17930
来自专栏猿天地

微信小程序之页面打开数量限制

无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的。当点击页面的回退按钮就是把当前页面关闭。

63620
来自专栏猿天地

微信小程序之启动页的重要性

启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明...

13730
来自专栏编程微刊

强烈推荐:绝对是好用的小程序开源框架

想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件...

35720
来自专栏花叔的专栏

小成本大活动,今年我们又给TGC搞了点技术创新

跟往年一样,花叔跟小伙伴们很庆幸参与到TGC全场运营小程序的研发项目中,去年智能印章小程序后,今年又搞了点新玩法。

14120
来自专栏猿天地

微信小程序登录那些事

最近团队在开发一款小程序,都是新手,一边看文档,一边开发。在开发中会遇到各种问题,今天把小程序登录这块的流程整理下,做个记录。

36930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励