微信小程序技术分享

2020-01-18 本文已影响0人 gy先生

小程序是什么？

官方称为"小程序"，可理解为镶嵌在微信的App
与订阅号、服务号和企业号属于同级体系。由此，小程序、订阅号、服务号、企业号形成了并行的微信生态四大体系。

小程序优势

性能比WebApp好
无需安装，不占内存，在微信内即搜即用，使用成本相对于安装App来说降低了很多
学习开发门槛低，前端技术+热更新
调用微信推送，地图or定位，扫码，支付等多种服务

应用场景

横轴=需求刚性，纵轴=需求频次，象限=需求类别

象限1：高频、刚需，小程序不适用于高频、刚需的需求场景，该场景下应采用原生App
象限2：高频、非刚需，游戏，视频等要求很高的交互、视觉体验和沉浸感，建议采用原生App；日常工具类产品，
在功能和性能满足的前提下，基于开发成本和使用成本，建议采用小程序
象限3：低频、非刚需，属于小众专业度很强的需求，不建议使用
象限4：低频、刚需，小程序非常适用于低频、刚需的长尾生活服务需求

代码构成

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

小程序的启动

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过配置 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径，写在 pages 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

新建页面

Page 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 data 数据和 .wxml 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。
在渲染完界面之后，页面实例就会收到一个 onLoad 的回调，你可以在这个回调处理你的逻辑。

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

生命周期

image

数据绑定

通过setData传递数据来刷新绑定的视图，不支持双向绑定

//.js
Page({
  data: {
    imgSrc: "http://www.google.cn/xxx.jpg",
  }
})

//.wxml
<image src="{{imgSrc}}"></image>

列表渲染

//.js
Page({  
 data:{  
    items: [  
        { message: 'Foo' },  
        { message: 'Bar' }  
    ]  
  }  
})  

//.wxml
<text wx:for="{{items}}" wx:for-index="itemIndex" wx:for-item="itemValue" >{{itemValue.message}}</text>

显示与隐藏元素

使用wx-if和hidden控制元素的显示和隐藏

<text wx-if="{{items.length > 0}}">大标题</text>

事件处理

小程序中，全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件
控件可添加data-"自定义参数"，通过function中"事件参数".currentTarget.dataset."自定义参数"获取到值

//.wxml
<button bindtap="noWork" data-tag1="buttonA">明天不上班</button>

//.js
Page({
  data: {
  },
  noWork:function (e) {
    console.log(e.currentTarget.dataset.tag1);
  }
})