準(zhǔn)備工作
1：用沒有注冊過微信公眾平臺的郵箱注冊一個微信公眾號拖云， 申請帳號 ,點擊 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據(jù)指引填寫信息和提交相應(yīng)的資料贷笛，就可以擁有自己的小程序帳號。注冊完成之后開始登錄江兢。
我們可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的 AppID 了 昨忆。小程序的 AppID 相當(dāng)于小程序平臺的一個身份證杉允，后續(xù)你會在很多地方要用到 AppID (注意這里要區(qū)別于服務(wù)號或訂閱號的 AppID)邑贴。有了小程序帳號之后，我們需要一個工具來開發(fā)小程序叔磷。
根據(jù)官方教程進行開發(fā)https://mp.weixin.qq.com/debug/wxadoc/dev/
3：安裝開發(fā)工具
前往 開發(fā)者工具下載頁面 拢驾，根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進行安裝，有關(guān)開發(fā)者工具更詳細的介紹可以查看 《開發(fā)者工具介紹》 改基。打開小程序開發(fā)者工具繁疤，用微信掃碼登錄開發(fā)者工具，準(zhǔn)備開發(fā)你的第一個小程序吧秕狰！我的電腦是64位的：
4：安裝完成之后
你的第一個小程序開啟：新建項目選擇小程序項目稠腊，選擇代碼存放的硬盤路徑，填入剛剛申請到的小程序的 AppID鸣哀，給你的項目起一個好聽的名字架忌，最后，勾選 "創(chuàng)建 QuickStart 項目" (注意: 你要選擇一個空的目錄才會有這個選項)我衬，點擊確定叹放，你就得到了你的第一個小程序了饰恕，點擊頂部菜單編譯就可以在 IDE 預(yù)覽你的第一個小程序。
5：編譯預(yù)覽
點擊工具上的編譯按鈕井仰，可以在工具的左側(cè)模擬器界面看到這個小程序的表現(xiàn)埋嵌，也可以點擊預(yù)覽按鈕，通過微信的掃一掃在手機上體驗?zāi)愕牡谝粋€小程序俱恶。OK雹嗦，你已經(jīng)成功創(chuàng)建了你的第一個小程序，并且在微信客戶端上體驗到它流暢的表現(xiàn)速那。
小程序初始化目錄：
1：page 頁面文件夾 存放項目頁面渲染相關(guān)文件俐银，新建文件夾，再新建pages端仰；
2：utils 存放js庫和數(shù)字格式化文件
3： 配置文件
上手開發(fā)
不了解小程序的兄弟們可以在github上找一些簡單的源碼捶惜，先看著源碼進行聯(lián)系喲~
標(biāo)簽組件
<view></view>
<text></text>模板語法
①條件渲染
<view wx:if="{{表達式}}">xxx</view>
<view wx:elif="{{表達式}}">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存儲數(shù)據(jù)
wx.setStorageSync('key','value')
4.getStorageSync獲取數(shù)據(jù)
var value = wx.getStorageSync('key')
5.wx.request請求數(shù)據(jù)
-
導(dǎo)航
①標(biāo)簽<navigator>
01 默認導(dǎo)航 url=""
02 open-type打開頁面類型
navigate默認打開
redirect不留歷史記錄
switchTab切換底部欄
navigateBack返回
03 打開小程序
a. app.json中配置
"navigateToMiniProgramAppIdList": ["wxb8f91a4e8d7eb4ae"],
b. navigator填寫
<navigator target="miniProgram" open-type="navigate" app-id="wxb8f91a4e8d7eb4ae" path="要打開的頁面，默認首頁" extra-data="" version="release"> 面試寶典 </navigator>②js方式
wx.navigateTo({url:''})跳轉(zhuǎn)頁面
wx.redirectTo({url:''})跳轉(zhuǎn)不留歷史記錄
wx.switchTab({url:''})底部導(dǎo)航欄頁面切換
wx.navigateBack()返回
wx.navigateToMiniProgram({appid:'appid'})切換小程序 生命周期
onLoad頁面的參數(shù)(ajax請求通知在這個函數(shù)調(diào)用)
onShow頁面顯示
onReady頁面首次渲染
onHide
switchTab,切換底部導(dǎo)航蘭navigate跳轉(zhuǎn)頁面
onUnload卸載(redirect時候荔烧，頁面就會卸載)
onPullDownRefresh下拉刷新
onReachBottom觸底
onShareAppMessage分享
