博客> 微信小程序技术分享
微信小程序技术分享
2020-04-02 16:13 评论:0 阅读:12557 skyMaster123
ios tableview swift objc 苹果 pull-to-refresh

小程序是什么?

  • 官方称为"小程序",可理解为镶嵌在微信的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
    &lt;button bindtap="noWork" data-tag1="buttonA"&gt;明天不上班&lt;/button&gt;

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



## 资料
* [微信组件](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html#组件)
* [api](https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html#api)
* [小程序社区](http://www.wxapp-union.com)
* [微信开发者社区](https://developers.weixin.qq.com)
收藏
0
sina weixin mail 回到顶部