微信小程序初體驗與DEMO分享

前言

前一段時間微信公佈小程序，瞬間引來了大量的關注。博主的公司也將其定爲目標之一，遂派本菜爲先頭兵（踩坑俠）。

此次開發了一個比較完整的DEMO，模仿自某個APP首頁，因爲保護隱私的目的我把數據拷貝出來而不是經過接口的方式訪問，請求接口的方法我會在後面詳細說明。

廢話很少說，先上原碼：https://github.com/Darylxyx/wx-app/tree/master/tanqu-wx。有興趣的朋友能夠下一個IDE導入項目玩玩。

文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html。

IDE下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107

 

百家之長

在看完微信小程序開發文檔，下載專用IDE進行開發後，若是用一個詞形容小程序，那就是集百家之長。

下面咱們大概扯下有哪些比較先進的技術被用於其中。

 

模板語法

數據綁定

<view>{{message}}</view>

Page({
    data: {
        message: 'Hello MINA'
    }
});

小程序的模板語法與Vue.js十分類似，甚至不少語法只是前綴更改了。

條件渲染

<!--Vue.js-->
<div v-if="ok">Yes</div>
<div v-else>No</div>

<!--小程序-->
<view wx:if="{{ok}}">Yes</view>
<view wx:else>No</view>

列表渲染

<!--Vue.js-->
<div v-for="item in array">
    {{ item.message }}
</div>

<!--小程序-->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

能夠看出小程序在模板語法方面不知道是否是借鑑Vue.js（不瞭解不敢亂說），但總的來講這種Angular、Vue之類的雙向數據綁定方式開發起來仍是很是方便快捷的。不像React單向數據流的方式，須要將數據綁定於狀態機中，學習成本略高。

不一樣的是，小程序中沒有用 html，頁面文件後綴爲 .wxml（不是w-xml，是wx-ml）。因此內部使用的不是傳統 html 標籤，而是封裝好的組件。

注意，在小程序中是沒有 window 和 document 對象的。

 

模塊化

工程目錄

不像通常web項目須要本身規劃目錄，小程序經過IDE能夠快速生成一個基本的項目結構。根目錄的 pages 下每個文件夾表明一個頁面，其中的 wxml 文件會自動加載同級目錄下的 wxss（css）和 js 文件。

wxml模塊化

wxml 能夠將通用的模板（template）單獨保存，在須要的地方引用。

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

wxss模塊化

wxss 能夠實現 css 預編譯工具那樣的模塊化引用。

/** common.wxss **/ .small-p { padding:5px;
}

/** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px;
}

 

佈局

若是有人作過混合開發應用（hybrid）的項目，好比 AppCan 或者 ReactNative 就會知道，這些工具會支持一種很強大但在瀏覽器環境兼容不太好的佈局方式——彈性盒模型。

微信小程序不出意料地支持了這種佈局方式，大大提升了佈局效率，而且讓2016年的web開發人員再也不爲各類場景下的垂直居中浪費時間。

各屏幕適配

在閱讀文檔時，看到的最大的驚喜就是微信小程序有本身獨特的尺寸單位——rpx。

用法就是當設計給出750像素的設計稿時，你只須要把設計稿裏每一個元素尺寸單位改爲rpx，就能夠適應全部的手機屏幕了，不須要爲了適應屏幕進行必定的百分比計算。

這簡直是吊炸天的存在！遺憾的是在博主測試的時候該單位並未生效，不過相信很快會修復這個問題的。退一步可使用 rem 做爲單位。

 

發起請求

在小程序裏並非經過 Ajax 發起請求的，而是經過 wx.request API 來發請求，傳遞參數方式與 jq ajax 相似，同時也沒有跨域的煩惱。

要注意的是，訪問的接口須要提早進入小程序後臺，以管理員身份設置「開發設置」，配置「request合法哉名」。不然會報「接口不在合法列表裏」的錯誤。

目前只能配置一個請求域名，且一個月內只能修改3次。

 

其餘

· 小程序擁有本身的動畫API，同時也支持傳統的CSS3動畫，性能上的對比有興趣的朋友能夠本身試驗下。

· 小程序有諸如：錄音、重力感應、羅盤等原生應用上才能實現的功能API。

· 小程序中有列表上下滑動的組件（scroll-view），也有支持滑塊左右滑動的組件（swiper），但若是需求要求你支持兩者，那麼嵌套這兩個組件會出現很明顯的卡頓。

· 經過此次的DEMO製做，發現性能方面，尤爲是動畫，比原生應用仍是有必定差距，頁面元素越多越明顯，感受不適合作太複雜的應用。

 

感謝你的瀏覽，但願能有所幫助