1. 注冊微信小程序賬號

• 點擊我進入微信公眾平臺 進入后點擊立即注冊
  
• 注冊成功且登錄后進入小程序管理后臺
  

2. 安裝開發者工具

• 點擊進入開發文檔
  
• 進入安裝開發工具（穩定版本）
  
• 一路默認下一步進行安裝

3. 開發者工具的使用

• 使用注冊微信小程序的微信號掃碼
  
• 登錄后點擊后面大加號
  
• 項目名稱 目錄為自定義
• AppID在微信小程序后臺的開發中（下圖中復制過來）
  
• 后端服務可自己選擇
• 點擊新建項目

4. 項目框架

• 編輯器部分的文件
  

5. 了解代碼

<view class="box">
<image mode="aspectFill" src="{{imgUrl}}"></image>
<button bindtap="change" type="primary">change</button>
</view>

• 里面的view就相當于div標簽
• image可以添加圖片 mode屬性是設置圖片的縮放規則
• 無論是屬性值還是插值都可以使用{{…}}來展示
• button按鈕中的bindtap注冊事件 與@click相同 type按鈕的樣式

5.1 小程序中改變變量的值

Page({data: {imgUrl:'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590483227&di=ec4ff76460d4478d56b251663ecd4022&src=http://a2.att.hudong.com/36/48/19300001357258133412489354717.jpg'},change(){this.setData({imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590494051074&di=c45128899a0b8fc71464a9329ce5974e&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg'})}
})

• 在js的事件中可以通過this.setData來改變屬性的值

5.2 請求頭端接口

• onLoad相當于Vue中的created，頁面加載時執行
• wx.request是請求后端接口
• 此請求是沒有跨域問題的 跨域只存在于宿主是瀏覽器的情況 所以小程序不存在跨域
• 在上面的success方法是簡寫方法，注意在其中的this指向問題，需用this要改成箭頭函數

5.3 調試工具中的AppData

• 調試工具中的AppData可以實時查看數據中的變量

5.4 小程序中的遍歷

<view class="circle-list"><view class="circle-item" wx:for='{{circleList}}' wx:for-item='item'><image src="{{item.user.avatar}}"></image><text>{{item.user.nickname}}</text></view>
</view>

• 通過wx：for進行遍歷，wx：for-item=‘item’ 指向item遍歷出來的數據，不指向的話 默認也是item