微信小程序-一一网

这是我参与更文挑战的第18天，活动详情查看：更文挑战

何为微信小程序

基于微信
功能单一
原生体验

优势

扫码安装，用完即走
多端兼容
离线功能
开发成本低

劣势

仅用于微信，无法复用
硬件支持差
有限场景、有限业务
不可外链、不可分享

流程

(1)、注册（新的账号）
(2)、认证（限制支付功能）
(3)、开发（20个开发者账号）
(4)、审核（约两周）
(5)、发布（覆盖更新）
运营规范

名称、简介
服务类目
功能（单一、独立）
内容
数据

语言设计及规范

(1)、友好礼貌

重点突出
流程明确

(2)、清晰明确

导航明确，来去自如
减少等待，反馈及时
异常可控，有路可退

(3)、便捷优雅

减少输入
避免误操作
利用接口提升性能

(4)、统一稳定

开发-文件结构

小程序主体


app.js	小程序逻辑
app.json	小程序公共设置
app.wxss	小程序公共样式表

小程序页面


.js	页面逻辑
.json	页面配置
.wxml	页面结构
.wxss	页面样式表

配置文件

属性	类型	描述
pages	String Array	设置页面路径，数组的第一项代表小程序的初始页面
window	Object	设置小程序的状态栏、导航条、标题、窗口背景色、下拉刷新
tabBar	Object	设置底部tab的表现
networkTimeout	Object	设置各种网络请求的超时时间
debug	Boolean	设置是否开启debug模式

开发-MINA框架

WXML

数据绑定
条件渲染
列表渲染
模板
事件
引用

WXML-数据绑定

{{Mustache}}语法
动态数据来自Page对象的data
{{}}中应为javascript表达式或对象

page({
    data: {
        a: 1,
        b: 2,
        c: 3
    }
})
复制代码

<text>{{a}} + {{b}} = {{a+b}}</text>

<text hidden="{{a === 1}}">something...</text>

<view wx:for="{{[a, b, c]}}">{{item}}</view>

<template is="component" data="{{a, b, sum: c}}"></template>
复制代码

WXML-条件渲染

单个元素

<view wx:if="{{size > 100}}"> big </view>
<view wx:elif="{{size < 10}}"> small </view>
<view wx:else> normal </view>
复制代码

多个元素

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>
复制代码

wx:if vs. hidden

WXML-列表渲染

wx:for

<view ws:for="['one', two', 'three']">{{index}}-{{item}}</view>
复制代码

自定义迭代项

<block
    ws:for="['one', 'two', 'three']"
    ws:for-index="idx"
    ws:for-item="value">
    <text>{{idx}}</text>
    <text>{{value}}</text>
</block>
复制代码

wx:key

(1)、迭代项为对象时的某个属性（唯一性）

<button ws:for="objectArray" wx:key="id">{{item.text}}</button>
复制代码

(2)、迭代项为字符串或数字时

<button ws:for="objectArray" wx:key="id">{{item.text}}</button>
复制代码

WXML-模板

定义

<template name="sampleTemplate">
    <view>
        <text>{{index}}:{{msg}}</text>
        <text>Time: {{time}}</text>
    </view>
</template>
复制代码

使用

<template
is="sampleTemplate"
data="{{index: 0, msg: 'hello world', time: new Date()}}"/>
复制代码

**模板具有自己的作用域

WXML-事件

bind

不会阻止事件冒泡

catch

阻止事件冒泡

page({
    tapName: function(event){
        console.log(event)
    }
});
<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
复制代码

冒泡事件： touchstart、touchmove、touchend、touchcancel、tap、longtap
非冒泡事件： submit、input、scroll

WXML-引用

(1)、 import
import可以在该文件中使用目标文件的template
import有作用域，不会引入目标文件import的内容

(2)、 include
include可以将目标文件除template外的所有代码引入
相当于拷贝

WXSS(WeiXin Style Sheet)

优点
支持css大部分特性（支持flex、动画）
增加rpx（responsive pixel）尺寸单位
支持样式导入（@import）
支持内联样式

缺点
选择器支持很差，不支持级联，不支持伪类
相同选择器的样式不是合并，而是覆盖
资源不支持本地资源，只能网络资源或者base64

逻辑层-注册App

App({
    onLaunch: function() {
        // 当小程序初始化完成时，会触发onLaunch(全局只触发一次)
    },
    onShow: function() {
        // 当小程序启动，或从后台进入前台显示，会触发 onShow
    },
    onHide:function() {
        // 当小程序从前台进入后台，会触发onHide
    },
    onError: function(msg) {
        // 当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息
        console.log(msg)
    },
    globalData: 'I am global data'
});
复制代码

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	监听页面加载，接收页面参数
onReady	Function	监听页面初次渲染完成
onShow	Function	监听页面显示
onHide	Function	监听页面隐藏
onUnload	Function	监听页面卸载
onPullDownRefresh	Function	监听用户下拉动作
onReachBotton	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角分享
其他	Any	开发者可以添加任意的函数或数据到object参数中，在页面的函数中用this可以访问

组件

(1)、视图容器

view
scroll-view
swiper

(2)、基础内容

icon
text
progress

(3)、表单组件

button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea

(4)、导航

navigator

(5)、媒体组件

audio
image
video

(6)、地图

(7)、画布

canvas

(8)、客服会话

contact-button

API

API-网络

(1)、发起请求

非浏览器环境的ajax请求
仅支持https
没有cookie

(2)、文件上传下载
(3)、WebSocket

API-媒体

图片
录音
语音播放控制
音乐播放控制
音频组件控制
视频
视频组件控制

API-数据存储

key-value文件存储实现，并非localStorage
<10M

API-位置

获取位置
查看位置
地图组件控制

API-设备

系统信息
网络状态
重力感应（5次/秒）
罗盘（5次/秒）
拨打电话
扫码

API-界面

(1)、交互反馈

toast
modal
actionSheet

(2)、设置导航条
(3)、导航

navigateTo
redirectTo
switchTab
navigateBack

(4)、动画（现可使用css3动画取代）
(5)、绘图（类canvas）
(6)、下拉刷新

API-开放接口

登录
用户信息
微信支付
模板消息
客服消息
分享

导航与页面栈

路由方式	API	对应组件	页面栈	新页面	当前页面
打开新页面	wx.navigateTo	`<navigator url="{{url}}" open-type="navigate">link</navigator>`	新页面入栈	onLoad,onShow	onHide
页面重定向	wx.redirectTo	`<navigator url="{{url}}" open-type="redirect">link</navigator>`	当前页面出栈，新页面入栈	onLoad,onShow	onUnload
页面返回	wx.navigateBack	n/a	页面不断出栈，直到目标页面	onShow	onUnload
Tab切换	wx.switchBack	`<navigator url="{{url}}" open-type="switchTab">link</navigator>`	页面全部出栈，只留下新的Tab页面	depends	depends