微信小程序
https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114
微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。
概覽
為了幫助開發者簡單和高效地開發和調試微信小程序，我們在原有的公眾號網頁調試工具的基礎上，推出了全新的 微信開發者工具，集成了公眾號網頁調試和小程序調試兩種開發模式。
- 使用公眾號網頁調試，開發者可以調試微信網頁授權和微信JS-SDK 詳情
- 使用小程序調試，開發者可以完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發布等功能。
為了更好的開發體驗，我們從視覺、交互、性能等方面對開發者工具進行升級，推出了 1.0.0 版本。
開發者工具下載
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
代碼構成
在上一章中，我們通過開發者工具快速創建了一個 QuickStart 項目。你可以留意到這個項目里邊生成了不同類型的文件:
.json后綴的JSON配置文件.wxml后綴的WXML模板文件.wxss后綴的WXSS樣式文件.js后綴的JS腳本邏輯文件接下來我們分別看看這4種文件的作用。
小程序配置 app.json
app.json是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。QuickStart 項目里邊的app.json配置內容如下：{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }WXML 模板
從事過網頁編程的人知道，網頁編程采用的是 HTML + CSS + JS 這樣的組合，其中
HTML是用來描述當前這個頁面的結構，CSS用來描述頁面的樣子，JS通常是用來處理這個頁面和用戶的交互。同樣道理，在小程序中也有同樣的角色，其中
WXML充當的就是類似HTML的角色。打開pages/index/index.wxml，你會看到以下的內容:<view class="container"> <view class="userinfo"> <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像昵稱 </button> <block wx:else> <image src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>WXSS 樣式
WXSS具有CSS大部分的特性，小程序在WXSS也做了一些擴充和修改。
JS 交互邏輯
一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫
JS腳本文件來處理用戶的操作。<view>{{ msg }}</view> <button bindtap="clickMe">點擊我</button>點擊
button按鈕的時候，我們希望把界面上msg顯示成"Hello World"，於是我們在button上聲明一個屬性:bindtap，在 JS 文件里邊聲明了clickMe方法來響應這次點擊操作：Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } })
mpvue
http://mpvue.com/
微信小程序的結構可以看出， 真正入手還是有一定難度， 對於廣大前端來說 html css js更加熟悉， 對於wxml wxss 以及js都需要再學習。
下面是vue生態的橋接者，鏈接web和微信小程序。
介紹
mpvue（github 地址請參見）是一個使用 Vue.js 開發小程序的前端框架。框架基於Vue.js核心，mpvue修改了Vue.js的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套Vue.js開發體驗。實踐案例
美團酒旅、餐飲、到店、金融等業務接入。
名稱由來
mp：mini program 的縮寫mpvue：Vue.js in mini program主要特性
使用
mpvue開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：
- 徹底的組件化開發能力：提高代碼復用性
- 完整的
Vue.js開發體驗- 方便的
Vuex數據管理方案：方便構建復雜應用- 快捷的
webpack構建機制：自定義構建策略、開發階段 hotReload- 支持使用 npm 外部依賴
- 使用
Vue.js命令行工具 vue-cli 快速初始化項目- H5 代碼轉換編譯成小程序目標代碼的能力
體驗
http://mpvue.com/mpvue/quickstart/
按照快速上手指南，很容易運行 mpvue的mpvue/mpvue-quickstart模板。
# 4. 創建一個基於 mpvue-quickstart 模板的新項目 # 新手一路回車選擇默認就可以了 $ vue init mpvue/mpvue-quickstart my-project # 5. 安裝依賴，走你 $ cd my-project $ npm install $ npm run dev
源碼：
https://github.com/fanqingsong/code-snippet/tree/master/mpvue/my-project
在微信開發者工具上查看
查看dist目錄中目標文件，是一個完整的小程序的文件和目錄：
