創(chuàng)建小程序

新建項目選擇小程序項目悼粮，選擇代碼存放的硬盤路徑掀淘，填入剛剛申請到的小程序的 AppID，給你的項目起一個好聽的名字耘纱，最后阳液，勾選 "創(chuàng)建 QuickStart 項目" (注意: 你要選擇一個空的目錄才會有這個選項)，點擊確定揣炕，你就得到了你的第一個小程序了帘皿，點擊頂部菜單編譯就可以在 IDE 預(yù)覽你的第一個小程序。

框架

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page畸陡。一個小程序主體部分由app.js,app.json,app.wxss組成鹰溜，必須放在項目的根目錄
其中:
app.js 表示小程序邏輯
app.json 表示小程序公共設(shè)置
app.wxss 表示小程序公共樣式表（可選）

一個小程序頁面由四個文件組成，分別是:
js ：頁面邏輯
wxml: 頁面結(jié)構(gòu)
wxss: 頁面樣式（可選）
json: 頁面配置（可選）

配置

app.json文件用來對微信小程序進(jìn)行全局配置丁恭，決定頁面文件的路徑曹动、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間牲览、設(shè)置多 tab 等墓陈。
以下是一個包含了所有配置選項的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages接受一個數(shù)組，每一項都是字符串第献，來指定小程序由哪些頁面組成贡必。每一項代表對應(yīng)頁面的【路徑+文件名】信息，數(shù)組的第一項代表小程序的初始頁面庸毫。小程序中新增/減少頁面仔拟，都需要對 pages 數(shù)組進(jìn)行修改。

window用于設(shè)置小程序的狀態(tài)欄飒赃、導(dǎo)航條利花、標(biāo)題、窗口背景色载佳。
注：HexColor（十六進(jìn)制顏色值）炒事，如"#ff00ff"

tabBar如果小程序是一個多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)蔫慧，以及 tab 切換時顯示的對應(yīng)頁面

其中 list 接受一個數(shù)組挠乳，數(shù)組中的每個項都是一個對象，其屬性值如下：

邏輯層(App Service)

小程序開發(fā)框架的邏輯層由 JavaScript 編寫。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層欲侮，同時接受視圖層的事件反饋。
在 JavaScript 的基礎(chǔ)上肋联，我們做了一些修改威蕉，以方便地開發(fā)小程序。

App

App() 函數(shù)用來注冊一個小程序橄仍。接受一個 object 參數(shù)韧涨，其指定小程序的生命周期函數(shù)等。

getApp()
全局的 getApp() 函數(shù)可以用來獲取到小程序?qū)嵗?/p>

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

Page

Page() 函數(shù)用來注冊一個頁面侮繁。接受一個 object 參數(shù)虑粥，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)宪哩、事件處理函數(shù)等娩贷。

object 內(nèi)容在頁面加載時會進(jìn)行一次深拷貝，需考慮數(shù)據(jù)大小對頁面加載的開銷

數(shù)據(jù)綁定

可以在page里通過WXML對數(shù)據(jù)進(jìn)行綁定

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

頁面相關(guān)事件處理函數(shù)

onPullDownRefresh: 下拉刷新
onReachBottom: 上拉觸底
onPageScroll: 頁面滾動,參數(shù)為scrollTop锁孟，可自定義頁面在垂直方向已滾動的距離（單位px）

自定義轉(zhuǎn)發(fā)字段

Page({
  onShareAppMessage: function () {
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/user?id=123'
    }
  }
})

WXML

WXML（WeiXin Markup Language）是框架設(shè)計的一套標(biāo)簽語言彬祖，可以構(gòu)建出頁面的結(jié)構(gòu)(類似DOM結(jié)構(gòu))。用以下一些簡單的例子來看看 WXML 具有什么能力：

數(shù)據(jù)綁定

<view> {{message}} </view>

列表渲染

等價于v-for

<view wx:for="{{array}}"> {{item}} </view>

條件渲染

通過判斷view的值來進(jìn)行選擇渲染

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

Page({
  data: {
    view: 'MINA'
  }
})

模板

先聲明一個模板品抽，通過模板標(biāo)簽調(diào)用
使用 is 屬性储笑，聲明需要的使用的模板，然后將模板所需要的 data 傳入

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

等價于v-on

<view bindtap="add"> {{count}} </view>

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

數(shù)據(jù)綁定

數(shù)據(jù)綁定使用 Mustache 語法（雙大括號）將變量包起來圆恤，可以作用于：

組件屬性

<view id="item-{{id}}"> </view>

控制屬性

<view wx:if="{{condition}}"> </view>

關(guān)鍵字

<checkbox checked="{{false}}"> </checkbox>

運算

可以在 {{}} 內(nèi)進(jìn)行簡單的運算突倍，支持的有如下幾種方式：

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算數(shù)運算

<view> {{a + b}} + {{c}} + d </view>

邏輯判斷

<view wx:if="{{length > 5}}"> </view>

組合

也可以在 Mustache 內(nèi)直接進(jìn)行組合，構(gòu)成新的對象或者數(shù)組盆昙。

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個數(shù)組羽历，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index淡喜，數(shù)組當(dāng)前項的變量名默認(rèn)為 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名窄陡，使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

block wx:for

類似 block wx:if，也可以將 wx:for 用在<block/>標(biāo)簽上拆火，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊跳夭。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

事件

什么是事件

事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進(jìn)行處理们镜。
事件可以綁定在組件上币叹，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)模狭。
事件對象可以攜帶額外信息颈抚，如 id, dataset, touches。

事件的使用方式

在組件中綁定一個事件處理函數(shù)。
如bindtap贩汉，當(dāng)用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)驱富。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

詳細(xì)的事件如下

引用

WXML 提供兩種文件引用方式import和include。

import

import可以在該文件中使用目標(biāo)文件定義的template,如：
在 item.wxml 中定義了一個叫item的template：

<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml匹舞，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 的作用域

import 有作用域的概念褐鸥，即只會 import 目標(biāo)文件中定義的 template，而不會 import 目標(biāo)文件 import 的 template赐稽。

include

include 可以將目標(biāo)文件除了 <template/> <wxs/> 外的整個代碼引入叫榕，相當(dāng)于是拷貝到 include 位置

<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<view> header </view>
<view> footer </view>

wxss

WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。
與 CSS 相比姊舵，WXSS 擴(kuò)展的特性有：
尺寸單位
樣式導(dǎo)入

尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)晰绎。規(guī)定屏幕寬為750rpx。如在 iPhone6 上括丁，屏幕寬度為375px荞下，共有750個物理像素，則750rpx = 375px = 750物理像素史飞，1rpx = 0.5px = 1物理像素锄弱。

樣式導(dǎo)入

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑祸憋，用;表示語句結(jié)束会宪。

.small-p {
  padding:5px;
}

@import "common.wxss";
.middle-p {
  padding:15px;
}

組件

框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)蚯窥。

什么是組件

組件是視圖層的基本組成單元掸鹅。
組件自帶一些功能與微信風(fēng)格的樣式。
一個組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽拦赠，屬性用來修飾這個組件巍沙，內(nèi)容在兩個標(biāo)簽之內(nèi)。

<tagname property="value">
  Content goes here ...
</tagname>

view

視圖容器相當(dāng)于div荷鼠，我們往里面寫內(nèi)容或嵌套標(biāo)簽

scroll-view

一塊可以滾動的區(qū)域句携，可以通過修改屬性實現(xiàn)滾動效果

swiper

輪播圖

movable-view

可移動的視圖容器，在頁面中可以拖拽滑動

cover-view

覆蓋在原生組件之上的文本視圖允乐，可覆蓋的原生組件包括map矮嫉、video、canvas牍疏、camera蠢笋、live-player、live-pusher

camera

調(diào)用系統(tǒng)相機(jī),需先調(diào)用wx.createCameraContext

wx.createCameraContext(this)

創(chuàng)建并返回 camera 上下文 cameraContext 對象鳞陨，cameraContext 與頁面的 camera 組件綁定昨寞，一個頁面只能有一個camera，通過它可以操作對應(yīng)的 <camera/> 組件。

// camera.js
Page({
    takePhoto() {
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                    src: res.tempImagePath
                })
            }
        })
    },
    error(e) {
        console.log(e.detail)
    }
})

API

wx.navigateTo保留當(dāng)前頁面援岩，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面歼狼，使用wx.navigateBack可以返回到原頁面
wx.setNavigationBarTitle動態(tài)設(shè)置當(dāng)前頁面的標(biāo)題。
wx.showLoading(OBJECT)顯示 loading 提示框, 需主動調(diào)用 wx.hideLoading才能關(guān)閉提示框

自定義組件

類似于頁面享怀，一個自定義組件由 json wxml wxss js 4個文件組成羽峰。要編寫一個自定義組件，首先需要在 json 文件中進(jìn)行自定義組件聲明

{
  "component": true
}

組件的配置需要在.js文件里書寫凹蜈，通過component注冊組件，并提供組件的屬性定義忍啸、內(nèi)部數(shù)據(jù)和自定義方法仰坦。

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
    someData: {}
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function(){}
  }
})

使用自定義組件

使用自定義組件计雌，需要在調(diào)用組件的頁面的.json文件里進(jìn)行引用聲明

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

組件模版

組件模版的寫法與頁面模板相同

組件模板中可以提供一個slot標(biāo)簽悄晃，可以獲取到插入模板中的內(nèi)容

<!-- 組件模板 -->
<view class="wrapper">
  <view>這里是組件的內(nèi)部節(jié)點</view>
  <slot></slot>
</view>

<!-- 引用組件的頁面模版 -->
<view>
  <component-tag-name>
    <!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
    <view>這里是插入到組件slot中的內(nèi)容</view>
  </component-tag-name>
</view>

組件樣式

組件對應(yīng) wxss 文件的樣式，只對組件wxml內(nèi)生效
指定組件默認(rèn)樣式可以使用:host選擇器

:host {
  color: yellow;
}

Component構(gòu)造器

Component構(gòu)造器可用于定義組件凿滤，調(diào)用Component構(gòu)造器時可以指定組件的屬性妈橄、數(shù)據(jù)、方法等翁脆。

checkbox

多項選擇器爵川，內(nèi)部由多個checkbox組成。
bindchange：<checkbox-group/>中選中項發(fā)生改變時觸發(fā) bindchange事件

可綁定的屬性如下

<checkbox-group bindchange="checkboxChange">
  <label class="checkbox" wx:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</checkbox-group>

input

輸入框寝贡，用法與HTML相同，具體屬性參考微信小程序文檔

label

用來關(guān)聯(lián)其他表單元素值依，用法與HTML相同兔甘，提供for屬性來查找id進(jìn)行關(guān)聯(lián)

picker

從底部彈起的滾動選擇器，現(xiàn)支持五種選擇器鳞滨，通過mode來區(qū)分洞焙，分別是普通選擇器，多列選擇器，時間選擇器澡匪，日期選擇器熔任，省市區(qū)選擇器，默認(rèn)是普通選擇器唁情。

普通選擇器

<view class="section__title">普通選擇器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      當(dāng)前選擇：{{array[index]}}
    </view>
  </picker>

普通選擇器提供以下屬性進(jìn)行修飾

時間選擇器

通過設(shè)定最小時間和最大時間疑苔，在該范圍內(nèi)進(jìn)來時間選擇

<view class="section__title">時間選擇器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      當(dāng)前選擇: {{time}}
    </view>
  </picker>

時間選擇器提供以下新屬性

選擇器的聯(lián)動

當(dāng)我們需要實現(xiàn)通過選擇省份后甸鸟，市和區(qū)同時發(fā)生改變惦费，可以通過bindcolumnchange方法來進(jìn)行監(jiān)聽

<picker mode="multiSelector" bindcolumnchange="onColChange" bindchange="onpickerCha" range="{{arr2}}"value="{{index}}">
我的兒子是:{{arr2[0][index[0]]}}------{{arr2[1][index[1]]}}
</picker>

onColChange(e){
    if(e.detail.value==1){
      this.setData({
        'arr2[1]':["aa","bb"]
      })
    }
    if(e.detail.value==0){
      this.setData({
        'arr2[1]':["男","女"]
      })
    }
  },

radio

radio-group
單項選擇器，內(nèi)部由多個<radio/>組成抢韭。
radio的屬性同上checkbox

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
  </label>
</radio-group>

登錄小程序

小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標(biāo)識薪贫，快速建立小程序內(nèi)的用戶體系。
小程序調(diào)用wx.login() 獲取 臨時登錄憑證code 刻恭，并回傳到開發(fā)者服務(wù)器瞧省。開發(fā)者服務(wù)器以code換取 用戶唯一標(biāo)識openid 和 會話密鑰session_key。

wx.login

調(diào)用接口wx.login() 獲取臨時登錄憑證（code）
可選參數(shù)如下

其中success接收兩個參數(shù)
errMsg表示成功調(diào)用的結(jié)果
code是成功調(diào)用后返回的用戶登錄憑證（有效期五分鐘）,開發(fā)者需要在開發(fā)者服務(wù)器后臺調(diào)用 api，使用 code 換取 openid 和 session_key 等信息

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          //發(fā)起網(wǎng)絡(luò)請求
          wx.request({
            url: 'https://test.com/onLogin',
            data: {
              code: res.code
            }
          })
        } else {
          console.log('登錄失斊锟啤橡淑！' + res.errMsg)
        }
      }
    });
  }
})

wx.getUserInfo

通過該接口可以拿到用戶的個人信息，但是如果沒有得到用戶授權(quán)便調(diào)用該接口則直接報錯
成功調(diào)用后的回調(diào)函數(shù)參數(shù)如下

獲取到useInfo后你可以通過以下參數(shù)獲取用戶信息

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授權(quán)
    wx.getSetting({
      success: function(res){
        if (res.authSetting['scope.userInfo']) {
          // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
          wx.getUserInfo({
            success: function(res) {
              console(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
  }
})

wx.showModal

?顯示模態(tài)彈窗伍掀，相當(dāng)于提示框

wx.showModal({
  title: '提示',
  content: '這是一個模態(tài)彈窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用戶點擊確定')
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
})

wx.requestPayment

發(fā)起微信支付
該接口有五個必填的屬性
timeStamp:時間戳掰茶，即當(dāng)前的時間
nonceStr：隨機(jī)字符串，長度為32個字符以下蜜笤，用來作標(biāo)識
package：統(tǒng)一下單接口返回的 prepay_id 參數(shù)值濒蒋，提交格式如：prepay_id=*
signType：簽名算法，暫支持 MD5
paySign：簽名
通常情況下這五個數(shù)據(jù)都會由后臺提供給我們

wx.createAnimation

創(chuàng)建一個動畫實例animation調(diào)用實例的方法來描述動畫把兔。最后通過動畫實例的export方法導(dǎo)出動畫數(shù)據(jù)傳遞給組件的animation屬性沪伙。

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>

wx.createAnimation可傳四個參數(shù)分別是

animation

通過調(diào)用wx.createAnimation生成的動畫對象animation我們可以描述動畫
可用屬性請參考文檔

step

當(dāng)我希望在動畫的第一步執(zhí)行完后再執(zhí)行第二步時，可以在執(zhí)行完的動畫后面加上step()來標(biāo)識一組動畫的完成县好。step 可以傳入一個跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動畫的配置围橡。

Page({
onShow: function(){
    var animation = wx.createAnimation({
      duration: 1000,
        timingFunction: 'ease',
    })
    this.animation = animation
    animation.scale(2,2).rotate(45).step()
    this.setData({
      animationData:animation.export()
    })
  }
})

wx.scanCode

當(dāng)我們需要使用手機(jī)上的二維碼時，可以通過調(diào)用該方法調(diào)起客戶端掃碼界面

// 允許從相機(jī)和相冊掃碼
wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

// 只允許從相機(jī)掃碼
wx.scanCode({
  onlyFromCamera: true,
  success: (res) => {
    console.log(res)
  }
})