???? WeChat ?? ???? ?? ? ??? ?? ??? ???????. WeChat ?? ???? ??? ??? ? ?? ??? ??????

WeChat ?? ????? ??? ??? ???, ???? ??? ?? ?????. ?? 6?? ??? ??? ?? ?? APP? ?? ??? ???? ??? ??? ??? ? ????. ??? ??? ?? WeChat ???? ????? ?? ????? ?? ????(?-?? ? QR ?? ?? ?)? ??? ?? ??? ????. ?????? ??? ?? ??? ?? ????? WeChat ??? ??? H5 light ?????????. WeChat? ???? ?? ??(??, ??, ???, ?? ?)? WeChat ?? ??(???, ??, ??, ?)? ?? ???? ??? ?? ?? API? ?????.

???? ???? ???? ??? ?? Zephyr Weather ?? API ?????? ???? DOME? ??????. ?????~

1. ??? ????? ?? ??

1. ?? ??: ??? ???? ??? ?? ???? ?? WeChat? ?? ?? ??? ??? ??? ??? ?? ??? ???? ??? ? ????.

2. ???? ?????? ???: ??? ??? ? ?? ?? QR ??? ???? ??????. ?? ????? ????? ?? ??? ??? ?? ??? ????? ?? ?? ??? ??? ? ????. ??? ???? AppID? ???? ?? ? ?? ??? ???? ????? ??? ?? ?? ?? ???? ??? ???? ??? ?????.

3. ?? ???? ??: ??? ????? app.js, app.json ? app.wxss? ???? ? ?? ??? ?? ??? ?????. ??.

　 App.js? ?? ????? ??? ???????. ? ????? ?? ????? ????? ?????? ?? ??? ???? API? ???? ?? ??? ??? ? ????.

　 app.json? ?? ????? ?? ?????. ?? ????, pages? ??? ?? ??(????? ? ?? ??? ????), ?? ???? ? ??? ?? ? ?? ?? ?????.

　app.wxss? ?? ?? ????? ?? ??? ?????. . ???? ??? common.css? ??

4. ??? ???: ??? ?????? ? ??? ??? ??? ?? ?? ?? ??? ?? 4?? ?????. .js? ???? ????, .json? ?? ?????. , .wxss? ??? ?? ????, .wxml? ??????. ?? ??.js是腳本文件，.json是配置文件，.wxss是樣式表文件，.wxml是頁面結(jié)構(gòu)文件，其中json和wxss文件為非必須（默認會繼承app的json和wxss默認設(shè)置）。

二、小程序的框架

1、小程序的配置

　　app.json主要分為五個部分：pages：頁面組，window：框架樣式（狀態(tài)欄、導航條、標題、窗口背景色），tabBar：底部菜單，networkTimeout：網(wǎng)絡超時設(shè)置，debug：開啟debug模式

　　page.json針對頁面單獨設(shè)置，層疊掉app.json的全局設(shè)置

"pages""pages/index/index""pages/logs/logs""window""backgroundTextStyle":"light""navigationBarBackgroundColor":?"#000""navigationBarTitleText":?"WeChat""navigationBarTextStyle":"white"

2、小程序的邏輯

　　使用App()來注冊一個小程序，必須在app.js, json ? wxss ??? ?? ?????(

????? ?? ?? json ? wxss ??? ?????

). 2. ?? ????? ?????

1. ?? ????? ?? App.json? ?? ???: ??? ??, ?: ??? ???(?? ???, ?? ???, ??, ? ???), tabBar: ?? ??, networkTimeout: ???? ?? ?? ??, ???: ??? ?? ??

　 page.json? ???? ????? ???? app.json

? ?? ??? ????? ?????.

App({//如下為小程序的生命周期
??onLaunch:?function()?{?},//監(jiān)聽初始化
??onShow:?function()?{??},//監(jiān)聽顯示（進入前臺）
??onHide:?function()?{??},//監(jiān)聽隱藏（進入后臺：按home離開微信）
??onError:?function(msg)?{??},//監(jiān)聽錯誤
??//如下為自定義的全局方法和全局變量??
??globalFun:function(){},
??globalData:?'I?am?global?data'})

2. ?? ????? ??

App()? ???? ?? ????? ????? app.js? ???? ???. >, ?? ??? ?????

????????

Page({
??data:?{text:?"This?is?page?data."},//頁面數(shù)據(jù)，用來維護視圖，json格式
??onLoad:?function(options)?{??},//監(jiān)聽加載
??onReady:?function()?{??},//監(jiān)聽初次渲染完成
??onShow:?function()?{??},//監(jiān)聽顯示
??onHide:?function()?{??},//監(jiān)聽隱藏
??onUnload:?function()?{??},//監(jiān)聽卸載
??onPullDownRefresh:?function()?{??},//監(jiān)聽下拉
??onReachBottom:?function()?{??},//監(jiān)聽上拉觸底
??onShareAppMessage:?function?()?{??},//監(jiān)聽右上角分享
??//如下為自定義的事件處理函數(shù)（視圖中綁定的）
??viewTap:?function()?{//setData設(shè)置data值，同時將更新視圖
????this.setData({text:?'Set?some?data?for?updating?view.'})
??}
})

????????????Page()? ??? ???? ????, ? ???? js ??? ??????????????????

<!--{{}}綁定data中的指定數(shù)據(jù)并渲染到視圖--><view>{{text}}</view><!--wx:for獲取數(shù)組數(shù)據(jù)進行循環(huán)渲染，item為數(shù)組的每項--><view>?{{item}}?</view><!--wx:if條件渲染--><view>?WEBVIEW?</view><view>?APP?</view><view>?MINA?</view><!--模板--><template>
??<view>FirstName:?{{firstName}},?LastName:?{{lastName}}</view></template><template></template><template></template><!--bindtap指定tap事件處理函數(shù)為ViewTap--><view>?點我點我?</view>

???? 3. ?? ???? ? ? ??? ??????? ??　? ???? wxml ???? ??? js? ???? ?? ??? ???? ??? ??? ???? ???????

Page({
??data:?{//data數(shù)據(jù)主要用于視圖綁定
????text:"我是一條測試",
????array:[0,1,2,3,4],
????view:"APP",
????template:{
????????staffA:?{firstName:?'Hulk',?lastName:?'Hu'},
????????staffB:?{firstName:?'Shang',?lastName:?'You'}
????}
??},
??ViewTap:function(){console.log('額，點到我了了~')}//自定義事件，主要用于事件綁定})

/*app.json,該文件不能含有任何注釋，所以正式應用需刪除所有注釋內(nèi)容*/{??"pages":[//小程序的頁面路徑數(shù)組，第一條默認為首頁，所有頁面均需寫在這里，否則不能加載
????"pages/weather/weather",????"pages/about/about",????"pages/city/city"
??],??"window":{//小程序框架設(shè)置
????"navigationBarBackgroundColor":?"#000",????"navigationBarTitleText":?"天氣預報",????"navigationBarTextStyle":"#fff",????"backgroundColor":"#666",????"backgroundTextStyle":"light",????"enablePullDownRefresh":true
??},??"tabBar":?{//小程序底部菜單設(shè)置
????"color":?"#666",????"selectedColor":?"#56abe4",????"backgroundColor":?"#ddd",????"borderStyle":"black",????"list":?[{??????"pagePath":?"pages/weather/weather",??????"iconPath":?"images/tabbar/weather1.png",??????"selectedIconPath":?"images/tabbar/weather2.png",??????"text":?"天氣預報"
????},?{??????"pagePath":?"pages/city/city",??????"iconPath":?"images/tabbar/city1.png",??????"selectedIconPath":?"images/tabbar/city2.png",??????"text":?"設(shè)置城市"
????},?{??????"pagePath":?"pages/about/about",??????"iconPath":?"images/tabbar/about1.png",??????"selectedIconPath":?"images/tabbar/about2.png",??????"text":?"關(guān)于我"
????}],????"position":"bottom"
??}
}

??4. ?? ???? ???????wxss ???? ? ????? wxml? ??????. ??? ??? ??? ???? ?? CSS? ???? rpx ??? ?????. ? ? app.wxss? ????? ?? ???? ???? ?? ???? ??? ????. ??

三、小程序?qū)崙?zhàn)-天氣預報（利用和風天氣API）

先看看完成后的效果，一共三個頁面，測試demo不求美觀，不喜勿噴~

1、設(shè)置底部菜單和頁面

我們就在quick start生成的demo基礎(chǔ)上進行修改即可，因為涉及圖標icon，我們新建一個images文件夾來存放圖片

在原先pages文件夾中，刪除index和log頁面文件夾，新建weather、city、about三個頁面文件夾，及三個頁面對應的四個文件類型，文件結(jié)構(gòu)如下圖

接下來配置app.json文件

/*app.json,該文件不能含有任何注釋，所以正式應用需刪除所有注釋內(nèi)容*/{??"pages":[//小程序的頁面路徑數(shù)組，第一條默認為首頁，所有頁面均需寫在這里，否則不能加載
????"pages/weather/weather",????"pages/about/about",????"pages/city/city"
??],??"window":{//小程序框架設(shè)置
????"navigationBarBackgroundColor":?"#000",????"navigationBarTitleText":?"天氣預報",????"navigationBarTextStyle":"#fff",????"backgroundColor":"#666",????"backgroundTextStyle":"light",????"enablePullDownRefresh":true
??},??"tabBar":?{//小程序底部菜單設(shè)置
????"color":?"#666",????"selectedColor":?"#56abe4",????"backgroundColor":?"#ddd",????"borderStyle":"black",????"list":?[{??????"pagePath":?"pages/weather/weather",??????"iconPath":?"images/tabbar/weather1.png",??????"selectedIconPath":?"images/tabbar/weather2.png",??????"text":?"天氣預報"
????},?{??????"pagePath":?"pages/city/city",??????"iconPath":?"images/tabbar/city1.png",??????"selectedIconPath":?"images/tabbar/city2.png",??????"text":?"設(shè)置城市"
????},?{??????"pagePath":?"pages/about/about",??????"iconPath":?"images/tabbar/about1.png",??????"selectedIconPath":?"images/tabbar/about2.png",??????"text":?"關(guān)于我"
????}],????"position":"bottom"
??}
}

2、注冊小程序和整體樣式

修改app.js和app.wxss兩個文件如下

//app.jsApp({??//1、系統(tǒng)事件部分
??onLaunch:?function?()?{//小程序初始化時執(zhí)行
????var?that=this;
????that.curid?=?wx.getStorageSync('curid')?||?that.curid;//API：獲取本地緩存，若不存在設(shè)置為全局屬性
????that.setlocal('curid',?that.curid);//調(diào)用全局方法??},??//2、自定義全局方法部分
??setlocal:function(id,val){
????wx.setStorageSync(id,?val);//API：設(shè)置本地緩存??},??//3、自定義全局屬性部分
??curid:"CN101010100",
??version:"1.0"})

/**app.wxss**/.container?{margin:?0;?padding:?0;}.title{font-size:?14px;?font-weight:?bold;}

3、頁面的結(jié)構(gòu)（wxml）、樣式（wxss）、邏輯（js）和配置（json）

小程序中的wxml摒棄了HTML標簽， 改用view（類似p）、text（類似span）、icon等等，class同html指定樣式，bindtap綁定事件（類似onclick），該頁面無特殊配置，json文件內(nèi)容為空（非必須文件）

??
????當前城市：{{basic.city}}
????{{basic.update.loc}}

/**weather.wxss**/.city?{padding:?3%?5%;?background:?#ddd;}.city?text{font-size:?16px;?color:?#666;}.city?.update{?font-size:?12px;?float:?right;}

?app?=?getApp();
??data:{cur_id:app.curid,basic:"",now:""},
??
??onShow:?that?=?'加載中',icon:?'loading',duration:?10000})
????that.getnow((d){="http://files.heweather.com/cond_icon/"+d.now.cond.code+".png"
??getnow:
??????url:?'https://free-api.heweather.com/v5/now''01a7798b060b468abdad006ea3de4713''Content-Type':?'application/json'(res)?{fn(res.data.HeWeather5[0]);}
??bindViewTap:(){wx.switchTab({url:?'../city/city'})}})

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

怎樣使用react內(nèi)swiper方法

怎樣使用seajs在require書寫約定

? ??? WeChat ?? ???? ?? ??? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!