微信小程序開發系列（一）小程序開發初體驗

時間 2019-11-12

標籤微信程序開發系列體驗简体版

原文原文鏈接

開發小程序所需的基本技能

關於小程序的介紹和使用場景這裏不做介紹，這個系列的文章會一步一步地帶領你們快速地學習和掌握小程序的開發。javascript

關於尚未接觸太小程序的開發者來講，最關心的問題無非就是，開發小程序，我須要掌握哪些技能？css

從我學習小程序的經驗中得出，開發小程序的基本要求：html

若是你是一名已經工做1年以上的前端工程師，你幾乎不用學習任何新的東西就能夠快速上手；前端

若是你是一名剛剛大學畢業的大學生，你須要熟練使用HTML、CSS、JS；java

若是你是一名沒有任何基礎的小程序愛好者，我建議你先去系統學習HTML、CSS、JS、JSON、XML再來學習小程序。jquery

注意：小程序不是BS架構，它是一個徹底屬於CS架構的產品。我這裏將他與web聯繫起來只是爲了使你們更好的去理解和學習。web

小程序不會使用的知識有：jQuery，DOM操做，以及你所知道的目前的任何前端框架，這就是說，小程序的程序邏輯和佈局所有得本身寫，沒有像web前端那樣，有豐富的插件。可是，騰訊爲了使開發者更快速的開發小程序，節約開發成本，已經爲開發者封裝了不少組件，如輪播、滑塊、彈層等，若是看到這裏，你以爲本身還有繼續學習的興趣，請繼續往下學習。小程序

環境的搭建

小程序環境的搭建很是簡單，其實就是一個開發者工具，固然這個工具目前除了模擬器以外，沒什麼強大的地方，甚至語法提示也非常感人。後端

官方入口地址：前端框架

https://mp.weixin.qq.com

點擊「開發」，跳轉到小程序首頁，依次點擊「工具」、「下載」

根據你的電腦系統選擇合適的版本下載安裝便可。

安裝步驟省略，安裝成功後的快捷方式以下圖

寫一個Hello World

先啓動開發者工具，提示掃描二維碼登陸，使用微信掃碼便可。

登陸以後點擊「添加項目」

AppID選擇「無AppID」，項目名稱和項目目錄本身填寫，完成後點擊「添加項目」

隨後你會驚奇的發現，HelloWorld都爲咱們寫好了，真是尷尬..

小程序不須要按F5運行，而是直接編譯就能看到效果，因此咱們每次修改以後，只須要編譯一下就會自動展現咱們所作的修改了。

既然HelloWorld已經寫完了，那咱們就來認識一下開發者工具

左側是編譯調試的TAB菜單，中間是模擬器，咱們寫好的程序就是在模擬器中看效果的，右側樹狀的是代碼結構，知道這些就夠了。

這裏不會對開發者工具進行詳細的說明，就像咱們學習HTML的時候同樣，不會把HTML每一個標籤講的很細。由於以後的每一天，咱們都會去接觸這個工具，因此徹底不必花費時間去研究它（並且這個工具自己不是很強大，我開篇已經說過，因此，即便是一個新人，面對這個開發者工具也是沒有任何難度的）

從前端到小程序

我我的不大喜歡那些上來就開始講小程序目錄結構的文章，有兩點：

第1、 前端工程師或後端工程師，對於HTML、CSS、JS已是至關的熟悉了，可是小程序剛好不是徹底用的這些東西，確切的說只能說是相似，既然是相似，那麼就是說你以前的東西對你學習小程序只是有輔助性做用，小程序裏面仍然有許多新的東西。若是一開篇就去那些新的東西，不去與以前的開發作對比，那麼，你會花更多的時間去適應這個忽然的改變。

第2、 對於一些新人來講，更須要從前端轉換到小程序的適應。

下面咱們就來一塊兒作一個小的頁面，你會發現小程序的目錄結構和數據綁定原理你已經快速掌握了。

咱們就以這個HelloWorld頁面爲例，咱們用你們最熟悉的HTML把它寫出來。

代碼：

 1 <!DOCTYPE html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7    <meta charset="UTF-8">
 8 
 9    <title>Document</title>
10 
11    <style type="text/css">
12 
13    body{
14 
15             text-align: center;
16 
17    }
18 
19             #content{
20 
21                      margin-top: 100px
22 
23             }
24 
25    </style>
26 
27 </head>
28 
29 <body>
30 
31    <div id="header">
32 
33             <img id="avatar" src="" alt="">
34 
35             <div id="nickName"></div>
36 
37    </div>
38 
39    <div id="content"></div>
40 
41 </body>
42 
43 </html>
44 
45 <script type="text/javascript" src="jquery.js"></script>
46 
47 <script type="text/javascript">
48 
49    //假設這是從服務器端得到的數據
50 
51    var data={avatar:'avatar.png',nickName:'BeibeiTec',content:'Hello World'};
52 
53   
54 
55    //頁面渲染完成後將data的值賦值到相應的DOM元素中，以達到咱們的效果。
56 
57     var avatar=$('#avatar');
58 
59     var nickName=$('#nickName');
60 
61     var content=$('#content');
62 
63     avatar.attr('src',data.avatar);
64 
65     nickName.html(data.nickName);
66 
67     content.html(data.content);
68 
69 </script>

效果如圖：

這樣寫代碼真的是太爽了，熟練的HTML和CSS，優美的JS，好用的jQuery…

咱們來分析一下我這段代碼，由於個人數據data是變化的，每次都是動態加到頁面上的，因此，我HTML的部分，div中沒有寫任何要顯示的內容。可是，我心中很明白，我必定會有一個叫作data的JSON數據，剛好可以綁定到相應的DOM上，如我知道個人data.avatar會綁定到<img id="avatar" src="" alt="">的src這個屬性上。

而後咱們發現，咱們的HTML中變化的點就只有三個地方：

Img的src、兩個div的innerHtml。

下面咱們來看看小程序實現這個頁面是怎麼作的：

依次展開pages/index/index.wxml

代碼以下：

 1 <!--index.wxml-->
 2 
 3 <view class="container">
 4 
 5   <view  bindtap="bindViewTap" class="userinfo">
 6 
 7     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 8 
 9     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
10 
11   </view>
12 
13   <view class="usermotto">
14 
15     <text class="user-motto">{{motto}}</text>
16 
17   </view>
18 
19 </view>

這應該是一段你歷來沒有接觸過的「HTML」代碼，似懂非懂。

我先不對裏面出現的新標籤進行介紹，而是先把view當作是div，把text當作是p標籤。

 1 <!--index.wxml-->
 2 
 3 <div class="container">
 4 
 5   <div  bindtap="bindViewTap" class="userinfo">
 6 
 7     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 8 
 9     <p class="userinfo-nickname">{{userInfo.nickName}}</p>
10 
11   </div>
12 
13   <div class="usermotto">
14 
15     <p class="user-motto">{{motto}}</p>
16 
17   </div>
18 
19 </div>

聰明的你已經看出來了，和咱們的本身寫的HTML實際上是同樣的，只是有兩個地方略微不一樣：

一、 標籤的名字不一樣了，須要從新學習。

二、 咱們頁面中的變化點，都變成「{{}}」了。

這就是小程序的數據驅動機制，它把頁面中變化的點，都用兩個大括號的這種語法替換了，咱們要改變頁面的顯示內容，只須要改變這些大括號中的變量就能夠了，和模板引擎

差很少。

那麼，數據是從哪裏來的呢？

是的，其實你已經猜到了JS是寫在哪裏了，只是在好奇，這個數據是怎麼傳到頁面上的。打開index.js，咱們看看代碼：

 1 //index.js
 2 
 3 //獲取應用實例
 4 
 5 var app = getApp()
 6 
 7 Page({
 8 
 9   data: {
10 
11     motto: 'Hello World',
12 
13     userInfo: {}
14 
15   },
16 
17   //事件處理函數
18 
19   bindViewTap: function() {
20 
21     wx.navigateTo({
22 
23       url: '../logs/logs'
24 
25     })
26 
27   },
28 
29   onLoad: function () {
30 
31     console.log('onLoad')
32 
33     var that = this
34 
35     //調用應用實例的方法獲取全局數據
36 
37     app.getUserInfo(function(userInfo){
38 
39       //更新數據
40 
41       that.setData({
42 
43         userInfo:userInfo
44 
45       })
46 
47     })
48 
49   }
50 
51 })

Pages是一個很大的JSON，裏面存放的有一個叫作data的JSON和一些方法，由於我是.Net學科的，因此習慣了把函數叫作方法，後續文章中我說的方法，就表示一個function。

先來看這個data:

1  data: {
2 
3  　　motto: 'Hello World',
4 
5  　　userInfo: {}
6 
7  }

motto的值正是咱們要輸出的內容

可是問題來了，userInfo是空的，咱們卻能顯示頭像和暱稱，這咱們就想到了，必定是頁面在加載的時候，經過什麼途徑獲取到了這個userInfo，而後賦值給了data的userInfo對象，因此才能正常展現。

這不就是咱們再熟悉不過的頁面onLoad嗎？

從這個方法中，你學習到了第一條小程序代碼：

1 this.setData({
2 
3          userInfo:{userName:’xx’,userAvatar:’xx’}
4 
5 })

改變Pages對象中data的值

因此咱們得出結論：index.js裏面聲明瞭index.wxml裏面所須要的data，頁面的加載以及頁面中的元素的事件也是在這裏作處理。而咱們不用關心咱們改變data的值以後如何刷新頁面，由於當你改變data後，頁面的值就跟着變了。

而咱們的樣式，都寫在index.wxss裏面，和CSS幾乎如出一轍的語法，這裏就不過多闡述 了。

由此咱們發現了：

小程序的頁面由三部分組成：

視圖（.wxml）、邏輯（.js）、樣式（.wxss）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。