小程序基本特点

本质上，微信小程序还是运行在微信浏览器里的H5页面，主要编程手段还是js/css，小程序整体构架也是按照页面进行组织的，只是在页面基础上增了了一个app概念：用于管理入口、配置和全局变量存储。

小程序文件构成
与H5不同的是，小程序的文件组织方式将一个HTML文件分为四个文件：wxml、wxss、json和js四个扩展名的文件，分别对应普通html页面的html、css、json和js。

wxml的语法与标准html有比较大差别：小程序基本标签view取代了HTML的div标签，其他标签如image、icon、slider等也与小程序开发样式更紧密。
具体可参考小程序官方开发者网站https://developers.weixin.qq.com/miniprogram/dev/component/
小程序托管服务
和H5不同，小程序的页面文件和资源文件是托管在微信服务器上的，每次编译的同时都会将文件上传到托管服务器，调试手机扫码下载开发状态的小程序，进行测试和调试
小程序关联和发布
小程序的开发和发布是一体的，用户需要先注册一个小程序账号，将小程序账号的原始ID配置到开发工程的project.config.json的appid中即可完成开发工程与发布小程序关联。通过小程序开发工具编译和上传，即可在小程序账号后台看到开发的小程序了。
需要注意的是，一个电子邮件只能注册一个小程序账号。与我们一般理解注册开发者账号有偏差：一般我们理解是先注册一个开发者账号，然后在开发者账号中管理自己开发的所有小程序。
小程序和微信公众号的关系
小程序和微信公众号之间并无关系，两个是相互独立的。与H5不一样，H5页面只能通过代公众号的方式获得授权，而微信小程序与公众号的地位是一样的（甚至连小程序的注册和登录入口与公众号也是一样的：https://mp.weixin.qq.com/），小程序通过认证后，可以直接以小程序身份获取用户授权。微信公众号和小程序之间可以建立弱关联关系：仅限于微信后台推送文章时可以插入关联小程序；或者，小程序在页面中建议用户关注自己开发主体的其他公众号账号。
用H5快速开发小程序
如果不需要用到小程序特殊能力（如开发AR需要使用摄像头，获取用户电话等），可以直接用HTML5来开发小程序页面（需要部署在https服务器上），然后在小程序中通过web-view标签直接引用H5页面，快速开发一个H5包装小程序。

<!--pages/h5/h5.wxml-->
<view>
  <view>
    <web-view src="https://app.creativestar.cn/piaget/index.html#wechat_redirect"></web-view>
 </view>
</view>

需要注意，web-view引入H5页面以后，H5页面将占据整个窗口，也就是说我们不能做混合H5和小程序的编程。
在这里插入图片描述
但是，好消息是，嵌入小程序的H5页面可以通过链接方便的跳转到小程序的其他页面。我们可以用小程序原生开发功能页面，通过H5开发其他注册、信息展示等页面，通过混合开发，提高开发效率。

<script>
    $("h1").click(function () {
    
    
        wx.miniProgram.navigateTo({
    
     url: "/pages/index/index?param=value" });
    });
</script>

小程序开发前的准备

下载小程序开发工具
微信小程序提供了专门的开发编辑器，提供文件管理、预览、调试和上传发布等功能。
2. 配置https开发服务器
开发小程序前还需要准备一个https服务器，由于托管分配给每个小程序的空间只有2M，多余的资源都需要存放在自己的https服务器上，通过https协议供小程序调用使用，或者直接以H5页面的形式嵌入小程序。
使用https外联资源前，需要先通过小程序后台配置安全域名
理解小程序的双线程逻辑
小程序和H5最大的不同是渲染模式的差别，小程序号称双线程运行：页面渲染和脚本执行在两个独立线程中分别进行。这样页带来了一些小程序与H5开发的不同：

wx:渲染指令
第一次打开小程序代码，最明显的区别是wx:开头的渲染指令

<image wx:if="{
     
     {showOverlay}}" src="/images/arrow_left.png" bind:tap="back" style="position: absolute; width: 60rpx; height: 60rpx; top: 30rpx; left: 30rpx; z-index: 30;"></image>

wx:if 判断指令，如果if的计算结果为真，则渲染该标签，否则不渲染。这样做的好处是渲染代码和逻辑代码分离：逻辑代码不需要用类似jquery的$(.class)选择具体标签，修改标签显示样式，而只需要关注逻辑，修改变量值，渲染层自动通过变量值决定渲染样式。
其他指令还包括wx:else wx:for wx:key等

{ {}}数据绑定
微信小程序页面可以通过{ {}}双大括号将变量引入页面，呈现变量的计算结果。
如：

通过变量计算结果改变选中状态

扫描二维码关注公众号，回复： 12987580 查看本文章

<view id="select">
    <view class="select {
     
     {SELECT_TYPE.IMAGE === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.IMAGE}}" bind:tap="selectContent">图片</view>
    <view class="select {
     
     {SELECT_TYPE.VIDEO === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.VIDEO}}" bind:tap="selectContent">视频</view>
</view>

通过变量修改页面显示的文本

<text class="userinfo-nickname">{
   
   {userInfo.nickName}}</text>

bind:事件绑定
bind:后面跟绑定的事件名称，如bind:tap(轻触)，bind:longtap(长按)，bind:change(输入修改)等，bind:event也可以直接写成bindevent，如bindtap，bindlongtap，bindchang，看起来让人比较迷惑了。

<view id="select">
    <view class="select {
     
     {SELECT_TYPE.IMAGE === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.IMAGE}}" bind:tap="selectContent">图片</view>
    <view class="select {
     
     {SELECT_TYPE.VIDEO === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.VIDEO}}" bind:tap="selectContent">视频</view>
</view>

小程序的一些坑

渲染和逻辑双线程的同步问题

总体上来说，渲染和逻辑执行分离，让代码可以更简洁。但这种方法也不是没有弊病：由于渲染层和逻辑层处于不同的线程并行执行，同步问题会造成一些页面撕裂和闪烁。
比如，利用数据绑定，我们本可以很方便的实现序列帧的渲染

WXML

<view class="start">
    <image id="start" mode="widthFix" src="{
     
     {picSrc}}"></image>
</view>

JS

    onLoad: function () {
    
    
        let that = this;
        var i = 0;
        setInterval(function() {
    
    
            that.setData({
    
    picSrc: "/images/pic_" + fix(i, 4) + ".png"});
            ++i;
            if (i>=that.picCount) {
    
    
                i = 0;
            }
        }, 40, null)
    }

但实际执行结果是序列帧图片一直闪烁，根本不能用。看起来小程序的渲染和逻辑分离双线程实现还有很大的优化空间。

background-image不能使用本地图片资源

css属性的background-image不能指定本地路径的图片资源，不管是指定绝对路径

background-image: url(/image/backgnd.png);

还是相对路径

background-image: url(../image/backgnd.png);

都无法渲染图片，只能指定服务器上的绝对地址图片

background-image: url(https://app.creativestar.cn/image/backgnd.png);

或者用image标签取代

<image class="backgnd" src="/image/backgnd.png" mode="cover"></image>

要用setData给绑定变量赋值
小程序每个页面都定义了一组data数据

Page({
    
    
    data: {
    
    
        showOverlay: true,
        showContent: false,
        selectType: SELECT_TYPE.NONE,
    },

data数据结构里定义的数据是用于页面绑定变量用的，在前端页面中用{ {变量名}}可以直接引用变量值。按照js的语法，我们可以直接用this.data.variable可以直接赋值，但这样赋值修改后前端并不会变化。案例代码中小程序提供了一个this.setData函数修改变量值。

        this.setData({
    
    
            showOverlay: true,
            showContent: true,
            selectType: SELECT_TYPE.VIDEO,
        });

猜想由于小程序页面和脚本是分为两个线程执行的，实际实现时可能页面和脚本两个线程各存储一份数据，通过setData函数来跨线程传递数据。

微信小程序入坑注意事项

小程序入坑一些注意事项

小程序基本特点

小程序开发前的准备

小程序的一些坑

猜你喜欢