|
開發(fā)環(huán)境以及demo:
參見官方文檔锯厢，注冊->安裝開發(fā)工具->新建項目酥郭，demo就跑起來了懂衩。
這一步比較簡單角撞，按照提示一步步安裝好就行，然后用微信掃描二維碼登陸勃痴。 至此小程序的開發(fā)環(huán)境差不多完成谒所。
代碼構(gòu)成
-
pages
-
index
- index.js
- index.wxml
- index.wxss
-
logs
- logs.js
- logs.json
- logs.wxml
- logs.wxss
-
-
utils
- utils.js
app.js
app.json
app.wxss
project.config.json
文件詳解
-
app.json是對當前小程序的全局配置，包括了小程序的所有頁面路徑沛申、界面表現(xiàn)劣领、網(wǎng)絡超時時間、底部 tab 等铁材。demo 項目里的app.json配置內(nèi)容如下：{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }我們簡單說一下這個配置各個項的含義:
- pages字段 —— 用于描述當前小程序所有頁面路徑尖淘，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄奕锌。
- window字段 —— 小程序所有頁面的頂部背景顏色，文字顏色定義在這里的村生。
詳細配置可以參考： 小程序的配置 app.json
project.config.json惊暴，開發(fā)工具本身個性化配置，比如界面顏色趁桃、編譯配置等辽话。其他配置項細節(jié)可以參考文檔 開發(fā)者工具的配置 。-
page.json卫病，其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關(guān)的配置油啤。
如果你整個小程序的風格是藍色調(diào)，那么你可以在 app.json 里邊聲明頂部顏色是藍色即可蟀苛。實際情況可能不是這樣益咬，可能你小程序里邊的每個頁面都有不一樣的色調(diào)來區(qū)分不同功能模塊，因此我們提供了 page.json帜平，讓開發(fā)者可以獨立定義每個頁面的一些屬性幽告，例如剛剛說的頂部顏色、是否允許下拉刷新等等裆甩。其他配置項細節(jié)可以參考文檔 小程序的配置page.json冗锁。
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
4.wxml和wxss，其實就是擴展了的html和css淑掌，加入一些類似 wx:if 這樣的屬性以及 {{ }} 這樣的表達式蒿讥，配合js來管理狀態(tài)蝶念。 和vue如出一轍抛腕，寫過模板引擎的同學也可以很快上手。
小程序能力
這一章實際是大家都比較關(guān)心的媒殉，到底小程序能調(diào)用微信的哪些能力担敌。參見小程序的API 。
例如：
請求 ：
wx.request({
url: 'test.php',
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success: function(res) {
console.log(res.data)
}
需要注意的是小程序只能請求https的接口廷蓉，開發(fā)模式下可以打開詳情 - 不校驗合法域名全封、web-view（業(yè)務域名）、TLS 版本以及 HTTPS 證書來調(diào)試http請求桃犬。
獲取位置 ：
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}
})
open-data刹悴， 用于展示微信開放的數(shù)據(jù)，例：王者榮耀群排名
還支持canvas和地圖攒暇，可以做很多有意思的東西土匀。
熱更新，h5
因為要走小程序的審核形用，所以實現(xiàn)熱更新的方法只有依靠webview了就轧，而且webview有和小程序頁面一樣的history证杭，而且沒有小程序只能嵌套5層頁面的限制，不過只有企業(yè)應用才可以使用妒御，但是不妨礙在開發(fā)模式下體驗解愤。webview組件
推送
模板消息
可以使用消息模板， 但是有一定的限制：
下發(fā)條件說明
- 支付
當用戶在小程序內(nèi)完成過支付行為乎莉，可允許開發(fā)者向用戶在7天內(nèi)推送有限條數(shù)的模板消息（1次支付可下發(fā)1條送讲，多次支付下發(fā)條數(shù)獨立，互相不影響）- 提交表單
當用戶在小程序內(nèi)發(fā)生過提交表單行為且該表單聲明為要發(fā)模板消息的梦鉴，開發(fā)者需要向用戶提供服務時李茫，可允許開發(fā)者向用戶在7天內(nèi)推送有限條數(shù)的模板消息（1次提交表單可下發(fā)1條，多次提交下發(fā)條數(shù)獨立肥橙，相互不影響）違規(guī)說明
除不能違反運營規(guī)范外魄宏，還不能違反以下規(guī)則，包括但不限于：不允許惡意誘導用戶進行觸發(fā)操作存筏，以達到可向用戶下發(fā)模板目的
不允許惡意騷擾宠互，下發(fā)對用戶造成騷擾的模板
不允許惡意營銷，下發(fā)營銷目的模板
總體而言椭坚，小程序的通知限制還是很多的予跌。下面是一個通知的例子：
追求開發(fā)體驗
wepy是一套類vue.js體驗的框架：
- 類Vue開發(fā)風格
- 支持自定義組件開發(fā)
- 支持引入NPM包
- 支持Promise
- 支持ES2015+特性，如Async Functions
- 支持多種編譯器善茎，Less/Sass/Stylus券册、Babel/Typescript、Pug
- 支持多種插件處理垂涯，文件壓縮烁焙，圖片壓縮，內(nèi)容替換等
- 支持 Sourcemap耕赘，ESLint等
- 小程序細節(jié)優(yōu)化骄蝇，如請求列隊，事件優(yōu)化等
mpvue更進一步操骡，整套vue.js的開發(fā)模式九火，目標是使用一套代碼跑在多端包括WEB、小程序（微信和支付寶）和 Native（借助weex）
- 徹底的組件化開發(fā)能力：提高代碼復用性
- 完整的 Vue.js 開發(fā)體驗
- 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復雜應用
- 快捷的 webpack 構(gòu)建機制：自定義構(gòu)建策略册招、開發(fā)階段 hotReload
- 支持使用 npm 外部依賴
- 使用 Vue.js 命令行工具 vue-cli 快速初始化項目
- H5 代碼轉(zhuǎn)換編譯成小程序目標代碼的能力
|
