|
微信小程序已經(jīng)火了一段時(shí)間了，之前一直也在關(guān)注，就這半年的發(fā)展來看，相對原生APP大部分公司還是不愿意將主營業(yè)務(wù)放到微信平臺上，以免受制于騰訊，不過就小程序的應(yīng)用場景（用完即走和二維碼分發(fā)等）還是很值得我們學(xué)習(xí)的，技術(shù)上面如果了解React的話，會發(fā)現(xiàn)他們在組件化上面有很多雷同之處。說白了，小程序就是基于微信平臺的H5輕應(yīng)用，微信將系統(tǒng)底層功能（設(shè)備、位置、媒體、文件等）和微信自身功能（登錄、支付、分享等）封裝成相應(yīng)API供小程序調(diào)用。 自己根據(jù)官方文檔寫過一個(gè)DOME，借助和風(fēng)天氣開放API接口，實(shí)現(xiàn)天氣預(yù)報(bào)，僅供學(xué)習(xí)交流使用，謝謝~ 一、小程序基本概念 1、開發(fā)工具：為了配合小程序開發(fā)，微信專門配備了自己的開發(fā)工具，自行選擇對應(yīng)版本安裝。 2、創(chuàng)建項(xiàng)目應(yīng)用：安裝完成后，打開并掃碼登錄。小程序發(fā)布需要企業(yè)級的認(rèn)證公眾號，所以個(gè)人訂閱號是不能發(fā)布的。所以我這里選擇無AppID，創(chuàng)建項(xiàng)目選擇一個(gè)本地空文件夾，勾選創(chuàng)建quick start 項(xiàng)目生成一個(gè)demo。 3、編寫小程序：demo初始化并包含了一些簡單的代碼文件，其中app.js、app.json、app.wxss 這三個(gè)是必不可少的，小程序會讀取這些文件初始化實(shí)例。 app.js是小程序的初始化腳本，可以在這個(gè)文件中監(jiān)聽小程序的生命周期，申請全局變量和調(diào)用API等 app.json是對小程序的全局配置，pages設(shè)置頁面路徑組成（默認(rèn)第一條為首頁），window設(shè)置默認(rèn)頁面的窗口表現(xiàn)等 app.wxss 是整個(gè)小程序的公共樣式表。類似網(wǎng)站開發(fā)中的common.css 4、創(chuàng)建頁面：在pages目錄下，由一個(gè)文件夾中的四個(gè)同名不同類型文件組成。 二、小程序的框架 1、小程序的配置 app.json主要分為五個(gè)部分：pages：頁面組，window：框架樣式（狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色），tabBar：底部菜單，networkTimeout：網(wǎng)絡(luò)超時(shí)設(shè)置，debug：開啟debug模式 page.json針對頁面單獨(dú)設(shè)置，層疊掉app.json的全局設(shè)置 //app.json 2、小程序的邏輯 使用App來注冊一個(gè)小程序，必須在 App({//如下為小程序的生命周期
onLaunch: function { },//監(jiān)聽初始化
onShow: function { },//監(jiān)聽顯示（進(jìn)入前臺）
onHide: function { },//監(jiān)聽隱藏（進(jìn)入后臺：按home離開微信）
onError: function(msg) { },//監(jiān)聽錯(cuò)誤
//如下為自定義的全局方法和全局變量
globalFun:function{},
globalData: 'I am global data'
}) 使用Page注冊一個(gè)頁面，在每個(gè)頁面的js文件中注冊 Page({
data: {text: 'This is page data.'},//頁面數(shù)據(jù)，用來維護(hù)視圖，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值，同時(shí)將更新視圖
this.setData({text: 'Set some data for updating view.'})
}
}) 3、小程序的視圖與事件綁定 在每個(gè)頁面中的wxml文件中，對頁面js中data進(jìn)行數(shù)據(jù)綁定，以及自定義事件綁定 <!--{{}}綁定data中的指定數(shù)據(jù)并渲染到視圖-->
<view class='title'>{{text}}</view>
<!--wx:for獲取數(shù)組數(shù)據(jù)進(jìn)行循環(huán)渲染，item為數(shù)組的每項(xiàng)-->
<view wx:for='{{array}}'> {{item}} </view>
<!--wx:if條件渲染-->
<view wx:if='{{view == 'WEBVIEW'}}'> WEBVIEW </view>
<view wx:elif='{{view == 'APP'}}'> APP </view>
<view wx:else='{{view == 'MINA'}}'> MINA </view>
<!--模板-->
<template name='staffName'>
<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is='staffName' data='{{...template.staffA}}'></template>
<template is='staffName' data='{{...template.staffB}}'></template>
<!--bindtap指定tap事件處理函數(shù)為ViewTap-->
<view bindtap='ViewTap'> 點(diǎn)我點(diǎn)我 </view> 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('額，點(diǎn)到我了了~')}//自定義事件，主要用于事件綁定
}) 4、小程序的樣式 在每個(gè)頁面中的wxss文件中，對wxml中的結(jié)構(gòu)進(jìn)行樣式設(shè)置，等同于css，擴(kuò)展了rpx單位。其中app.wxss默認(rèn)為全局樣式，作用所有頁面。 三、小程序?qū)崙?zhàn)-天氣預(yù)報(bào)（利用和風(fēng)天氣API） 先看看完成后的效果，一共三個(gè)頁面，測試demo不求美觀，不喜勿噴~ 1、設(shè)置底部菜單和頁面 我們就在quick start生成的demo基礎(chǔ)上進(jìn)行修改即可，因?yàn)樯婕皥D標(biāo)icon，我們新建一個(gè)images文件夾來存放圖片 在原先pages文件夾中，刪除index和log頁面文件夾，新建weather、city、about三個(gè)頁面文件夾，及三個(gè)頁面對應(yīng)的四個(gè)文件類型，文件結(jié)構(gòu)如下圖 接下來配置app.json文件 /*app.json,該文件不能含有任何注釋，所以正式應(yīng)用需刪除所有注釋內(nèi)容*/
{
'pages':[//小程序的頁面路徑數(shù)組，第一條默認(rèn)為首頁，所有頁面均需寫在這里，否則不能加載
'pages/weather/weather',
'pages/about/about',
'pages/city/city'
],
'window':{//小程序框架設(shè)置
'navigationBarBackgroundColor': '#000',
'navigationBarTitleText': '天氣預(yù)報(bào)',
'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': '天氣預(yù)報(bào)'
}, {
'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兩個(gè)文件如下 //app.js
App({
//1、系統(tǒng)事件部分
onLaunch: function {//小程序初始化時(shí)執(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標(biāo)簽， 改用view（類似div）、text（類似span）、icon等等，class同html指定樣式，bindtap綁定事件（類似onclick），該頁面無特殊配置，json文件內(nèi)容為空（非必須文件） <!--weather.wxml-->
<view class='container'>
<view class='city' bindtap='bindViewTap'>
<text>當(dāng)前城市：{{basic.city}}</text><!--{{}}用來獲取同頁js文件中注冊頁面data中的數(shù)據(jù)-->
<text class='update'>{{basic.update.loc}}</text>
</view>
</view> /**weather.wxss**/
.city {padding: 3% 5%; background: #ddd;}
.city text{font-size: 16px; color: #666;}
.city .update{ font-size: 12px; float: right;} //weather.js
var app = getApp;//獲取當(dāng)前小程序?qū)嵗奖闶褂萌址椒ê蛯傩?Page({
//1、頁面數(shù)據(jù)部分,將綁定到視圖wxml中
data:{cur_id:app.curid,basic:'',now:''},//設(shè)置頁面數(shù)據(jù)，后面空值將在頁面顯示時(shí)通過請求服務(wù)器獲取
//2、系統(tǒng)事件部分
onShow:function{
var that = this;
wx.showToast({title: '加載中',icon: 'loading',duration: 10000})//設(shè)置加載模態(tài)框
that.getnow(function(d){//回調(diào)函數(shù)，根據(jù)數(shù)據(jù)設(shè)置頁面data，更新到視圖
wx.hideToast;//隱藏加載框
d.now.cond.src='http://files./cond_icon/' d.now.cond.code '.png';
that.setData({basic:d.basic,now:d.now})//更新數(shù)據(jù)，視圖將同步更新
})},
//3、自定義頁面方法：獲取當(dāng)前天氣API
getnow:function(fn){
wx.request({//請求服務(wù)器，類似ajax
url: 'https://free-api./v5/now',
data: {city:app.curid,key:'01a7798b060b468abdad006ea3de4713'},//和風(fēng)天氣提供用戶key，可自行注冊獲得
header: {'Content-Type': 'application/json'},
success: function(res) {fn(res.data.HeWeather5[0]);}//成功后將數(shù)據(jù)傳給回調(diào)函數(shù)執(zhí)行
})
}, 其他頁面代碼略，項(xiàng)目源文件見GitHub：https://github.com/gavin125/wxtest 4、注意防坑 跳轉(zhuǎn)并刷新頁面：需使用onshow來代替onload執(zhí)行邏輯，onload只在首次打開頁面時(shí)執(zhí)行一次。如：B頁面操作全局?jǐn)?shù)據(jù)并跳轉(zhuǎn)A頁面，A頁面onshow中獲取全局?jǐn)?shù)據(jù)更新視圖。 |
|
|
