資訊專欄INFORMATION COLUMN
摘要：在眾多消息里，啃先生排除掉預(yù)測類的信息，汲取了對于技術(shù)從業(yè)者有用的信息，整理出此文章，說說微信小程序開發(fā)的設(shè)計(jì)理念和入門。以上至少四個(gè)文件，即可生成一個(gè)最簡單的微信小程序。
昨晚臨睡覺前，還在想應(yīng)該給xx打個(gè)電話，問問微信應(yīng)用號應(yīng)該有原生 UI 吧，要不然跟直接跑 HTML 5 有什么區(qū)別？
而今天一大早我便一本正經(jīng)胡說八道猜想，微信小程序不會有 JS IDE ，一個(gè)小時(shí)之后，發(fā)現(xiàn)被打臉了，截圖為證。
在眾多消息里，啃先生排除掉預(yù)測類的信息，汲取了對于技術(shù)從業(yè)者有用的信息，整理出此文章，說說「微信小程序」開發(fā)的設(shè)計(jì)理念和入門。
在文章的最后告訴你，即使沒有進(jìn)行內(nèi)測名單，你也可以開發(fā)微信小程序。
壹 | 設(shè)計(jì)理念它是一個(gè)混合程序，所以即不是純粹的 Native App ，也不是純粹的 Web 應(yīng)用。
它是一個(gè)「封閉」的開發(fā)套件和框架，而不是「自由」的 JavaScript + CSS + HTML 。因此，你不能任性地使用 jQuery，zepto，更不能使用基于 jQuery 的第三方控件 ，也由不得開發(fā)者決定要用 Angular 還是 React。
它很像 Apple 開發(fā)者的范式，有開發(fā)者賬號，有 IDE ，有構(gòu)建工具，有 UI 規(guī)范等等。
MVC架構(gòu)，開發(fā)者不可直接操作 DOM 節(jié)點(diǎn)，頁面根據(jù)數(shù)據(jù)的變化渲染 UI ，業(yè)務(wù)邏輯專注于數(shù)據(jù)操作。
貳 | 生命周期「微信小程序」開發(fā)框架提供了 App 生命周期的管理，從打開一個(gè)微信小程序到離開過程是這樣的：
因此在編程時(shí)，有以下必不可少的元素：
app.json 它是App的配置中心，目前知道的配置項(xiàng)有窗體外觀「window」 ，菜單項(xiàng)及各項(xiàng)的外觀「tabBar」，網(wǎng)絡(luò)請求參數(shù)「networkTimeout」,以及頁面「page」它配置此App包含哪些頁面。
app.wxxs 這是App的公共樣式，就是CSS
app.js 這是App的啟動腳本，這里可以處理一些App啟動過程中頁面加載之前要處理的事情。
頁面 一個(gè)App可包含多個(gè)頁面，頁面的相對訪問路徑被配置在app.json里，每個(gè)頁面可以包含 [頁面名].js、[頁面名].wxml、[頁面名].wxxs、以及配置文件 [頁面名].json 。其中 wxxs 和 json 文件不是必需要的，如果有，那么它們會覆蓋 app.json 和 app.wxxs 的相同配置項(xiàng)。
以上至少四個(gè)文件，即可生成一個(gè)最簡單的微信小程序。
叄 | app.js 和 [頁面名].js微信執(zhí)行環(huán)境提供了全局的 App 實(shí)例，和 Page 實(shí)例，其中 app.js 主要是給 App 實(shí)例做配置，例如定義 onLaunch 方法，讓 App 啟動時(shí)，執(zhí)行一些任務(wù)。
而頁面的腳本例如 page1.js 則需要給 Page 實(shí)例做配置
肆 | 頁面渲染微信小程序并不允許開發(fā)者直接操作頁面 DOM 結(jié)點(diǎn)。
那么頁面 UI 怎么更新呢？熟悉 React 的應(yīng)該知道，React 組件根據(jù) state 變化來渲染 UI，業(yè)務(wù)邏輯專注于數(shù)據(jù)處理，微信小程序開發(fā)框架也是如此。以下 page1.wxml 使了類似 jsx 的語法，它使用 page1.js 的data 屬性進(jìn)行渲染，并且當(dāng) data 改變時(shí)，自動完成 UI 更新。
微信提供了幾個(gè) API 用于路由控制
wx.navigateTo( Object ) 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用 wx.navigateBack 可以返回到原頁面
wx.redirectTo( Object ) 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)某個(gè)頁面
wx.navigateBack( ) 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到上一頁
陸 | 網(wǎng)絡(luò)請求網(wǎng)絡(luò)請求也不是使用 XHR 標(biāo)準(zhǔn)，微信提供了網(wǎng)絡(luò)請求相關(guān) API ，有如下接口
柒 | 一些開發(fā) Tips理論上來講，以下結(jié)論是正確的
是否支持 JavaScript ES6？不管是否支持，你可以使用 ES6 進(jìn)行編碼，使用 Babel 構(gòu)建出 ES5 ，然后再到微信開發(fā)者工具中構(gòu)建出微信小程序
是否可以使用 less 等預(yù)處理語言。wxxs 使用的是 CSS 語言，所以應(yīng)該是可以的
HTML標(biāo)簽與微信的標(biāo)簽可以混著用，但是并不是所有的標(biāo)簽都可用，比如a 標(biāo)簽的 href 屬性是無效的，因?yàn)槲⑿判〕绦蛑荒茉?app.json 里有配置的頁面間跳轉(zhuǎn)，并且使用路由 API 進(jìn)行控制，不可任意跳。
掌握普通的 Web 開發(fā)，對開發(fā)微信小程序有沒有幫助。思維上有幫助，尤其是對于熟悉 React 開發(fā)框架的開發(fā)者。
以上，純粹一本正經(jīng)地紙上談兵，最新消息顯示，微信開發(fā)者工具已經(jīng)被破解了，所以，現(xiàn)在你就可以開始開發(fā)微信小程序了，文章發(fā)布時(shí)還可用，小伙伴們盡快去下載安裝，詳見 Github 鏈接： https://github.com/login?retu...
最后不忘推介一下公眾號，歡迎關(guān)注轉(zhuǎn)發(fā)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80456.html
摘要：本文托管在上，不定期更新最后更新時(shí)間官方文檔小程序開發(fā)文檔小程序設(shè)計(jì)指南小程序開發(fā)者工具新聞報(bào)道微信正式開放內(nèi)測小程序，不開發(fā)的日子真的來了氪關(guān)于微信小程序應(yīng)用號，我能透露的幾個(gè)細(xì)節(jié)可能吧你的產(chǎn)品適不適合做微信小程序你需要這篇產(chǎn)品邏 本文托管在github上，不定期更新：justjavac/awesome-wechat-weapp 最后更新時(shí)間：2016-09-24 06:22:10 ...
摘要：第一步搭開發(fā)環(huán)境首先，我們需要在本地搭建好微信小程序的開發(fā)環(huán)境。在微信小程序中，所有的網(wǎng)絡(luò)請求受到嚴(yán)格限制，不滿足條件的域名和協(xié)議無法請求。第五步配置微信小程序云端示例鏡像中，已經(jīng)部署好了，但是還需要在下修改配置中的域名證書私鑰。 「小程序」這個(gè)劃時(shí)代的產(chǎn)品發(fā)布快一周了，互聯(lián)網(wǎng)技術(shù)人都在摩拳擦掌，躍躍欲試。可是小程序目前還在內(nèi)測，首批只發(fā)放了 200 個(gè)內(nèi)測資格（淚流滿面）。本以為沒有...
摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...
閱讀 1442·2023-04-25 16:31
閱讀 2044·2021-11-24 10:33
閱讀 2749·2021-09-23 11:33
閱讀 2534·2021-09-23 11:31
閱讀 2909·2021-09-08 09:45
閱讀 2341·2021-09-06 15:02
閱讀 2650·2019-08-30 14:21
閱讀 2318·2019-08-30 12:56
