專欄介紹

新東網(wǎng)自2001年成立以來，掌握大數(shù)據(jù)、云計算、通信、物聯(lián)網(wǎng)及區(qū)塊鏈等信息技術(shù)，擁有一支逾16年經(jīng)驗的強大IT團隊。為沉淀企業(yè)技術(shù)實力，繼續(xù)發(fā)揮行業(yè)優(yōu)勢，《東網(wǎng)快訊》特邀新東網(wǎng)技術(shù)大咖帶您走進這些領(lǐng)先信息技術(shù)，揭秘新東網(wǎng)16年來的技術(shù)成果。

 

本文將帶你一步步創(chuàng)建完成一個微信小程序，并可以在手機上體驗該小程序的實際效果。這個小程序?qū)⒄{(diào)用豆瓣電影資訊接口展示電影熱訊、電影推薦和查詢電影。

 

源碼包

 

 

 

 

源碼包

 

 

 

網(wǎng)址： https://mp.weixin.qq.com

 

官方接入指南：

https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161107

 

一、填寫郵箱和密碼

請?zhí)顚懳醋赃^公眾平臺、開放平臺、企業(yè)號、未綁定個人號的郵箱。

 

二、激活郵箱

登錄郵箱，查收激活郵件，點擊激活鏈接

 

三、填寫主體信息

點擊激活鏈接后，繼續(xù)下一步的注冊流程。請選擇主體類型選擇，完善主體信息和管理員信息。

 

 

 

企業(yè)類型帳號可選擇兩種主體驗證方式。

 

方式一：需要用公司的對公賬戶向騰訊公司打款來驗證主體身份。打款信息在提交主體信息后可以查看到。

 

方式二：通過微信認證驗證主體身份，需支付300元認證費。認證通過前，小程序部分功能暫無法使用。

 

 

開發(fā)前準備

 

 

一、綁定開發(fā)者

 

登錄微信公眾平臺小程序，進入用戶身份- 開發(fā)者，新增綁定開發(fā)者。

已認證的小程序可以綁定不多于20個開發(fā)者。未認證的小程序可以綁定不多于10個開發(fā)者。

 

二、獲取AppID

 

進入“設(shè)置-開發(fā)設(shè)置”（需要管理員微信掃描登陸獲?。?，獲取AppID信息。

 

 

三、閱讀開發(fā)文檔并下載開發(fā)者工具

 

官方開發(fā)簡易教程：

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107

 

四、微信應用開放的服務(wù)和組件：

 

·        視圖容器：視圖(view)、滾動視圖（scroll-view）、滑動視圖(swiper)

·        基礎(chǔ)內(nèi)容：圖標、文本、進度條

·        表單組件：按鈕、表單等等

·        操作反饋

·        導航

·        媒體組建：音頻、圖片、視頻。

·        地圖

·        畫布

·        文件操作能力

·        網(wǎng)絡(luò)：上傳下載能力、WebSocket

·        數(shù)據(jù)：數(shù)據(jù)緩存能力

·        位置：獲取位置、查看位置

·        設(shè)備：網(wǎng)絡(luò)狀態(tài)、系統(tǒng)信息、重力感應、羅盤

·        界面：設(shè)置導航條、導航、動畫、繪圖等等

·        開放接口：登錄，包括簽名加密，用戶信息、微信支付、模板消息

 

 

編寫代碼

 

 

一、創(chuàng)建項目

 

我們需要下載安裝開發(fā)者工具

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107

開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄。選擇創(chuàng)建“項目”，填入上文獲取到的 AppID ，設(shè)置一個本地項目的名稱（非小程序名稱），比如“我的第一個項目”，并選擇一個本地的文件夾作為代碼存儲的目錄，點擊“新建項目”就可以了。

為方便了解微信小程序的基本代碼結(jié)構(gòu)，在創(chuàng)建過程中，如果選擇的本地文件夾是個空文件夾，開發(fā)者工具會提示，是否需要創(chuàng)建一個 quick start 項目。選擇“是”，開發(fā)者工具會幫助我們在開發(fā)目錄里生成一個簡單的 demo。

 

 

項目創(chuàng)建成功后，我們就可以點擊該項目，進入并看到完整的開發(fā)者工具界面，點擊左側(cè)導航，在“編輯”里可以查看和編輯我們的代碼，在“調(diào)試”里可以測試代碼并模擬小程序在微信客戶端效果，在“項目”里可以發(fā)送到手機里預覽實際效果。

 

二、文件結(jié)構(gòu)

 

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。

一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

app.js 后綴的是腳本文件

app.json 后綴的文件是配置文件

app.wxss 后綴的是樣式表文件

一個小程序頁面由四個文件組成，分別是：

       .js（必須）頁面邏輯

       .wxml（必須）頁面結(jié)構(gòu)

       .wxss（非必須）頁面樣式表

       .json（非必須）頁面配置

 

注意：小程序規(guī)定描述頁面的這四個文件必須具有相同的路徑與文件名

 

        

三、配置 app.json

 

使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。

 

 

app.json 配置項列表

屬性	類型	必填	描述
pages	String Array	是	設(shè)置頁面路徑
window	Object	否	設(shè)置默認頁面的窗口表現(xiàn)
tabBar	Object	否	設(shè)置底部 tab 的表現(xiàn)
networkTimeout	Object	否	設(shè)置網(wǎng)絡(luò)超時時間
debug	Boolean	否	設(shè)置是否開啟  debug 模式

 

pages

項目使用到的頁面都需要在這邊配置聲明，接受一個數(shù)組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數(shù)組的第一項代表小程序的初始頁面。

 

文件名不需要寫文件后綴，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。

 

tabBar

tabBar （客戶端窗口的底部有tab欄可以切換頁面）是一個數(shù)組，只能配置最少2個、最多5個tab，tab 按數(shù)組的順序排序。

 

window

用于設(shè)置小程序的狀態(tài)欄、導航條、標題、窗口背景色。

 

四、邏輯層 app.js

 

小程序開發(fā)框架的邏輯層是由JavaScript編寫，邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。由于框架并非運行在瀏覽器中，所以JavaScript 在 web 中一些能力都無法使用，如 document，window 等。造成無法使用JQuery等前臺基于window對象的js框架。

 

五、視圖層 WXML 與 WXSS

 

     WXML

WXML（WeiXin MarkupLanguage）是框架設(shè)計的一套標簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)

 

1、數(shù)據(jù)綁定

使用雙大括號標簽獲取xxx.js中data值，動態(tài)改變data中的值時wxml中實時變化

  {{message}}

// page.js

Page({

  data: {

    message: 'Hello MINA!'

  }

})

2、列表渲染

 {{item}} 

// page.js

Page({

  data: {

    array: [1, 2, 3, 4, 5]

  }

})

3、條件渲染

// page.js

Page({

  data: {

    view: 'MINA'

  }

})

4、模板

    FirstName: {{firstName}}, LastName: {{lastName}}

// page.js

Page({

  data: {

    staffA: {firstName: 'Hulk', lastName: 'Hu'},

    staffB: {firstName: 'Shang', lastName: 'You'},

    staffC: {firstName: 'Gideon', lastName: 'Lin'}

  }

})

5、事件

 {{count}} 

Page({

  data: {

    count: 1

  },

  add: function(e) {

    this.setData({

      count: this.data.count + 1

    })

  }

})

WXSS

WXSS(WeiXinStyle Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，具有CSS 大部分特性

       尺寸單位：rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

       rem（root em）: 規(guī)定屏幕寬度為20rem；1rem = (750/20)rpx 。

 

六、https請求

 

小程序只支持https協(xié)議，一個微信小程序，同時只能有5個網(wǎng)絡(luò)請求連接

 

 

注意：要微信小程序進行網(wǎng)絡(luò)通信，必須先設(shè)置域名，不然會出現(xiàn)錯誤：URL 域名不合法

使用管理員登陸：“設(shè)置”—“開發(fā)設(shè)置”—“服務(wù)器設(shè)置”