小程序
一种新的应用形态
特性
- 并不是HTML5/CSS3的技术
- 抛弃了臃肿的WebView
- 采用了JavaScriptCode动态解析
- C/S架构，不会出现跨域问题
- 大量借鉴React.js + ReactNative.js思想
开放的API
- 视图容器：视图(View)、滚动视图、Swiper
- 基础内容：图标、文本、进度条
- 表单组件：按钮、表单等等
- 操作反馈 导航
- 媒体组建：音频、图片、视频。
- 地图 画布 文件操作能力
- 网络：上传下载能力、WebSocket
- 数据：数据缓存能力
- 位置：获取位置、查看位置
- 设备：网络状态、系统信息、重力感应、罗盘
- 界面：设置导航条、导航、动画、绘图等等
- 开放接口：登录，包括签名加密，用户信息、微信支付、模板消息
开发环境
安装微信官方微信web开发者工具
项目结构
App- app.js // 处理全局逻辑- app.json // 公共配置- app.wxss // 公共样式表pages // 页面目录 index - xxx.js // 页面逻辑 - xxx.wxml // 页面视图 - xxx.wxss // 页面样式 - xxx.json // 配置文件utils // 工具库目录
wxml - WXML -> WeiXin Markup Language wxss - WXSS -> Weixin Style Sheet
Page函数
- Page里面data属性
-
Page.setData函数进行刷新界面数据 - 不能通过
this.data = {text: ''}修改data中的全部数据
app.json
pages // 设置页面路径，路由window // 设置默认页面的窗口tabBar // 设置底部tabnetworkTimeout // 设置网络超时时间debug // 开启debugger
视图
事件
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数
- 事件对象可以携带额外信息。 如id，dataset，touches
// 点击事件
数据修改
this.setData({dataKey: newValue})// 获取this.data.dataName 条件
wx:if
循环
wx:for
{ {item.name}}
模板
template
{ {name}}
wxml中的引用
生命周期
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }}) API
wx.request()
请求数据
wx.showLoading()
显示loading
wx.showToast()
模态框
wx.showLoading({ title: '加载中'}) wx.request({ url: '', data: {}, success (res) { wx.hideLoading() }, error () { wx.hideLoading() wx.showToast({ title: '请求错误', duration: 2000 }) }}) 数据缓存
wx.setStorage() // 设置缓存wx.getStorage() // 获取缓存
内置组件
视图
// 视图容器 // 可滚动视图区域 // 滑块视图容器
文本，图片，进度条，图标
导航
url需要相对路径，不支持跳转外链.
// 跳转wx.navigateTo() // 跳转到指定路由wx.navigateBack({delta: 2}) // 返回到指定路由/历史记录