淺談微信小程序

在如火如荼的互聯網技術發展中，各類各樣的框架出現，當下最受關注的應該就是微信小程序了。重新聞論壇乃至qq羣、微信羣，不少不少從事IT工做的朋友喜歡討論研究這個小程序。帶着好奇心，我也參與其中。

第一步，從官網下載微信開發者工具，它分爲windows64，windows32和mac，選擇相應的去下載。下載以後就安裝，步驟省略。

連接：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055652

第二步，就是下載demo了。

連接：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055652

第三步，打開微信開發者工具，導入解壓好的demo，這樣就能夠愉快地體驗小程序了。

在這個過程當中，咱們能夠知道，原來小程序裏的其實和不少框架挺像的。它的頁面也再也不是html了，而是像angular模式。樣式後綴也不是css而是wxss；單位再也不是px，而是rpx。

數據的綁定這一點和angular類似。

調試界面以下：

 

頁面代碼：

<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>

 樣式：

/**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;
}

 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
      })
    })
  }
})

 目錄：

從app.json能夠看出，頁面是從這裏引入的。

再看看app.js,以下所示：

咱們能夠知道小程序頁面初始化、獲取數據和調用接口的過程。

這是我的所知道的關於小程序的一點點，若有更有趣的，留下腳印吧。有興趣學習的朋友能夠去一探究竟了！