準(zhǔn)備工作

1：用沒有注冊(cè)過(guò)微信公眾平臺(tái)的郵箱注冊(cè)一個(gè)微信公眾號(hào)， 申請(qǐng)帳號(hào) ,點(diǎn)擊 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據(jù)指引填寫信息和提交相應(yīng)的資料，就可以擁有自己的小程序帳號(hào)。注冊(cè)完成之后開始登錄。

image

2：登錄 https://mp.weixin.qq.com

我們可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 了 。小程序的 AppID 相當(dāng)于小程序平臺(tái)的一個(gè)身份證，后續(xù)你會(huì)在很多地方要用到 AppID (注意這里要區(qū)別于服務(wù)號(hào)或訂閱號(hào)的 AppID)。有了小程序帳號(hào)之后，我們需要一個(gè)工具來(lái)開發(fā)小程序。
根據(jù)官方教程進(jìn)行開發(fā)https://mp.weixin.qq.com/debug/wxadoc/dev/

image

3：安裝開發(fā)工具

前往 開發(fā)者工具下載頁(yè)面 ，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝，有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看 《開發(fā)者工具介紹》 。打開小程序開發(fā)者工具，用微信掃碼登錄開發(fā)者工具，準(zhǔn)備開發(fā)你的第一個(gè)小程序吧！我的電腦是64位的：

image

4：安裝完成之后

你的第一個(gè)小程序開啟：新建項(xiàng)目選擇小程序項(xiàng)目，選擇代碼存放的硬盤路徑，填入剛剛申請(qǐng)到的小程序的 AppID，給你的項(xiàng)目起一個(gè)好聽的名字，最后，勾選 "創(chuàng)建 QuickStart 項(xiàng)目" (注意: 你要選擇一個(gè)空的目錄才會(huì)有這個(gè)選項(xiàng))，點(diǎn)擊確定，你就得到了你的第一個(gè)小程序了，點(diǎn)擊頂部菜單編譯就可以在 IDE 預(yù)覽你的第一個(gè)小程序。

image

image

5：編譯預(yù)覽

點(diǎn)擊工具上的編譯按鈕，可以在工具的左側(cè)模擬器界面看到這個(gè)小程序的表現(xiàn)，也可以點(diǎn)擊預(yù)覽按鈕，通過(guò)微信的掃一掃在手機(jī)上體驗(yàn)?zāi)愕牡谝粋€(gè)小程序。OK，你已經(jīng)成功創(chuàng)建了你的第一個(gè)小程序，并且在微信客戶端上體驗(yàn)到它流暢的表現(xiàn)。

image.png

小程序初始化目錄：

1：page 頁(yè)面文件夾 存放項(xiàng)目頁(yè)面渲染相關(guān)文件，新建文件夾，再新建pages；

image

2：utils 存放js庫(kù)和數(shù)字格式化文件

image

3： 配置文件

image

上手開發(fā)

不了解小程序的兄弟們可以在github上找一些簡(jiǎn)單的源碼，先看著源碼進(jìn)行聯(lián)系喲~

• 標(biāo)簽組件
  <view></view>
  <text></text>

• 模板語(yǔ)法
  ①條件渲染
  <view wx:if="{{表達(dá)式}}">xxx</view>
<view wx:elif="{{表達(dá)式}}">xxx</view>
<view wx:else>xxx</view>
  ②列表渲染
  <view wx:for="{{list}}" wx:key="{{index}}">{{index}}--{{item}}</view>
<text wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex"> {{myindex}}~{{myitem}} </text>
  ③模板template
  定義
  <template name="temp"> <view>標(biāo)題：{{name}}</view> </template>
  調(diào)用
  <template is="temp" {{name:"han"}}>
  導(dǎo)入模板
  <import src = "xxx.wxml" />
  ④非template-任意的wxml文件
  導(dǎo)入
  <include src="xxx.wxml" />
  相當(dāng)于把xxx.wxm文件內(nèi)容（除了template）拷貝到include地方
  ⑤事件
  類型
  bindtap 單擊
  bindinput 表單發(fā)生改變
  事件參數(shù)
  <view bindtap="showMsg" data-msg="xxx"></view> showMsg(e){ e.target.dataset.msg //獲取事件參數(shù) },
  ⑥表單

<input  value="{{msg}}" bindinput="inputHd"></input>
    inputHd(e){
e.detail.value   //表單的值
},
    更新數(shù)據(jù)與視圖
        this.setData({數(shù)據(jù)名1：數(shù)據(jù)值1})

• 組件與API
  ①組件
  容器view
  內(nèi)容text
  表單input/button
  ②api

1.showToast

wx.showToast({
title:'成功',
icon:'success',
duration:2000
})

2.showLoading

wx.showLoading({
title:'加載中',
})
setTimeout(function(){
wx.hideLoading()
},2000)

3.setStorageSync存儲(chǔ)數(shù)據(jù)
wx.setStorageSync('key','value')
4.getStorageSync獲取數(shù)據(jù)
var value = wx.getStorageSync('key')
5.wx.request請(qǐng)求數(shù)據(jù)

• 導(dǎo)航
  ①標(biāo)簽<navigator>
  01 默認(rèn)導(dǎo)航 url=""
  02 open-type打開頁(yè)面類型
  navigate 默認(rèn)打開
  redirect不留歷史記錄
  switchTab 切換底部欄
  navigateBack 返回
  03 打開小程序
  a. app.json中配置
  "navigateToMiniProgramAppIdList": ["wxb8f91a4e8d7eb4ae"],
  b. navigator填寫
  <navigator target="miniProgram" open-type="navigate" app-id="wxb8f91a4e8d7eb4ae" path="要打開的頁(yè)面，默認(rèn)首頁(yè)" extra-data="" version="release"> 面試寶典 </navigator>

  ②js方式
  wx.navigateTo({url:''})跳轉(zhuǎn)頁(yè)面
  wx.redirectTo({url:''})跳轉(zhuǎn)不留歷史記錄
  wx.switchTab({url:''})底部導(dǎo)航欄頁(yè)面切換
  wx.navigateBack()返回
  wx.navigateToMiniProgram({appid:'appid'})切換小程序

• 生命周期
  onLoad 頁(yè)面的參數(shù)(ajax請(qǐng)求通知在這個(gè)函數(shù)調(diào)用)
  onShow 頁(yè)面顯示
  onReady頁(yè)面首次渲染
  onHide
switchTab,切換底部導(dǎo)航蘭navigate跳轉(zhuǎn)頁(yè)面
  onUnload卸載(redirect時(shí)候，頁(yè)面就會(huì)卸載)
  onPullDownRefresh 下拉刷新
  onReachBottom觸底
  onShareAppMessage 分享