小程式：傳圖識字君                                  小程式：廁所在哪呢

     傳圖片上去把上面的文字抓取下來                          定位附近的廁所位置

　　做任何程式開發要首先找到其官方文件，我們先來看看其有哪些官方文件。

微信小程式開發文件連結為：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html，如下圖：

這裡就是做微信小程式開發的全部官方文件。

知道了文件的位置，下面我們來介紹下如何做一個微信小程式開發：

 /*********************************************************************

插播：

 由於上傳到騰訊視訊後，視訊檔案被自動壓縮了，導致線上觀看的視訊不是特別清晰。

本套視訊教程包含了微信小程式開發的基礎知識，特別適合學習微信小程式開發入門使用，請按照順序觀看學習。

本套教程原來銷售199元，現免費奉送，所有內容都是筆者親自錄製。

需要課程講解中用到的示例原始碼請關注微信公眾號：“微little程式”，按照提示獲取原始碼。關注成功後，也可直接點選公眾號中的“視訊教程”選單，詳細瞭解獲取配套示例原始碼的方式。

拿到示例原始碼後，自己再做嘗試，學習會更有效果。

也可掃描下方二維碼關注該公眾號：

******************************************************************************/

繼續：

第一步：下載微信小程式開發者工具並安裝，下載路徑：

進到下載介面後，根據自己的作業系統選擇相應的連結進行下載，下載完成後進行安裝。

第二步：登入工具

開發者工具安裝完成後我們就可以將其開啟，初次開啟會需要用微信掃碼登入，入下圖，用手機微信掃一掃後確認登入就可以了。

第三步：建立一個專案

登入成功後，如果是第一次使用該工具會彈出建立專案的視窗，如下圖：

​ 在建立過程中，如果選擇的本地資料夾是個空資料夾會出來一個勾選項“在當前目錄中建立quick start專案”，為方便初學者瞭解微信小程式的基本程式碼結構，請勾選此項，勾選後，開發者工具會幫助我們在開發目錄裡生成一個簡單的 demo，如下圖：

第四步：專案程式碼結構解釋

點選開發者工具左側導航的“編輯”，我們可以看到這個專案，已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js字尾的是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件。微信小程式會讀取這些檔案，並生成小程式例項。

下面我們簡單瞭解這三個檔案的功能，方便修改以及從頭開發自己的微信小程式。

​ 1、app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API，如本例的同步儲存及同步讀取本地資料。

2、​ app.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導航條樣式，配置預設標題。注意該檔案不可新增任何註釋。

3、app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。

　　我們注意到，在例項程式的程式碼中還有2個資料夾，一個是pages,一個是utils,其中utils是放通用工具類方法的一個資料夾，pages是存放所有頁面的資料夾。我們著重講一下這個pages.

第五步：小程式頁面檔案構成

　　在這個示例中，我們有兩個頁面，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>

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

執行結果如下：

第五步：手機預覽（只有獲得AppId的才有許可權預覽）

​ 開發者工具左側選單欄選擇"專案"，點選"預覽"，掃碼後即可在微信客戶端中體驗。

 以上是微信小程式前端開發的基本流程，而實際上要做一個內容可以更新的小程式，單有前端開發是遠遠不夠的，還需要後臺開發。後臺開發與web開發的後臺基本無異，可以選擇用java、php、nodejs等任一語言，有一點需要注意的是小程式後臺伺服器必須是https協議的，這就要求必須購買雲伺服器並將後臺伺服器設定成https服務。

本文由微信公眾號“微little程式”整理髮布，可在微信中搜索公眾號“微little程式”關注，也可掃描下面的二維碼關注。專注微信小程式領域，釋出微信小程式資訊，探討微信小程式開發技術。

最新文章將第一時間在該公眾號中釋出。

 微訊號：lxwl360

小程式製作服務商：拼序網