微信要改變世界，改變將來

微信要改變世界，改變將來。（正好個人老iphone5s,沒有空間了，我爲小程序點贊。建議程序猿們看看）

小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

關鍵點： 跨平臺，開發簡單，對比於安卓系統應用的不安全性，更好的保障了用戶的數據。 預加載資源保障極速的用戶體驗。 隨時可以更新資源與交互模式，經過微信通用JS API調用原生接口，保障體驗的同時，提供了靈活應變的手段 。 說點白話，微信小程序實際上是微信公衆平臺應用號的前身，聽說跟蘋果達成協議，蘋果要壟斷（應用）APP這個詞，因此和諧相處，小而美的，叫小程序。 如今是微信的小程序尚未開發，可是web開發者工具V1.0版本，能夠作測試使用了。 建立小程序實例 ​ 點擊開發者工具左側導航的「編輯」，咱們能夠看到這個項目，已經初始化幷包含了一些簡單的代碼文件。最關鍵也是必不可少的，是app.js、app.json、app.wxss這三個。其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

​ 下面咱們簡單瞭解這三個文件的功能，方便修改以及從頭開發本身的微信小程序。

​ app.js是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。調用MINA提供的豐富的API，如本例的同步存儲及同步讀取本地數據。想了解更多可用API，可參考API文檔

//app.js App({ onLaunch: function () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //調用登陸接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null } }) ​ app.json是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋。更多可配置項可參考配置詳解

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } ​ app.wxss是整個小程序的公共樣式表。咱們能夠在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規則。

/app.wxss/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } 建立頁面 ​ 在這個教程裏，咱們有兩個頁面，index頁面和logs頁面，即歡迎頁和小程序啓動日誌的展現頁，他們都在pages目錄下。微信小程序中的每個頁面的【路徑+頁面名】都須要寫在app.json的pages中，且pages中的第一個頁面是小程序的首頁。

​ 每個小程序頁面是由同路徑下同名的四個不一樣後綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js後綴的文件是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件，.wxml後綴的文件是頁面結構文件。

​ index.wxml是頁面的結構文件：

<!--index.wxml-->

<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> ​ 本例中使用了<view/>、<image/>、<text/>來搭建頁面結構，綁定數據和交互處理函數。

​ index.js是頁面的腳本文件，在這個文件中咱們能夠監聽並處理頁面的生命週期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。

//index.js //獲取應用實例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件處理函數 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({ userInfo:userInfo }) }) } }) ​ index.wxss是頁面的樣式表：

/index.wxss/ .userinfo { display: flex; flex-direction: column; align-items: center; }

.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; }

.userinfo-nickname { color: #aaa; }

.usermotto { margin-top: 200px; } ​ 頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。若是不指定頁面的樣式表，也能夠在頁面的結構文件中直接使用app.wxss中指定的樣式規則。

​ index.json是頁面的配置文件：

​ 頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋app.json的window中相同的配置項。若是沒有指定的頁面配置文件，則在該頁面直接使用app.json中的默認配置。

​ logs的頁面結構

<!--logs.wxml-->

<view class="container log-list"> <block wx:for-items="{{logs}}" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log}}</text> </block> </view> ​ logs頁面使用<block/>控制標籤來組織代碼，在<block/>上使用wx:for-items綁定logs數據，並將logs數據循環展開節點

//logs.js var util = require('../../utils/util.js') Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) })

} })

對了，如今還手機不能預覽。靜等小程序開發號放開。