2. 程式人生 > >微信小程式開發初體驗--教你開發小程式

微信小程式開發初體驗--教你開發小程式

阿新 • • 發佈：2019-01-11

微信小程式

微信小程式面世以來受到的關注頗多，直到最近我才動手嘗試進行了小程式的開發，總體上感覺還是不錯的，有一點不適應的就是要擺脫Web APP開發對DOM的操作。在這裡我就把我是如何利用API開發微信小程式的過程寫成教程，教大家快速上手體驗一次微信小程式的開發。

補充: 之前忘了把原始碼發上來，完成之後就已經放在Github上了 點我下載>>

在開始之前我們先來看下成品的效果圖


完成效果預覽

準備工作

我們先確定想要開發一款什麼樣的小程式，首先要符合「小」，因為我們這次是要體驗小程式的開發，所以儘量不要弄得太複雜；其次是「快」，小程式裡需要的資料啊、資源啊，最好是現成就有的，自己寫個API什麼的這就太耗時了，就不叫快速上手了。

所以呢，如果能呼叫現成的API那是極好的，經過一番挑選，我選擇了聚合資料的免費的歷史上的今天這個API，呼叫這個API獲取資料，我們只要做2個頁面就可以完全展示出來了，又「小」又「快」哈XD

注: API需要註冊之後獲得KEY才能使用，具體請檢視聚合資料官方文件，這裡預設各位已經註冊並擁有相應API所需的KEY

工程結構

微信開發者工具的安裝和使用在這裡就不多作介紹了，有疑問的話可以看微信官方的簡易教程

先建立一個工程，依次點選「新增專案」－－「無AppID」，然後填好「專案名稱」並選擇「專案目錄」，點選「新增專案」


新增專案

然後我們來清理一下預設工程的目錄結構，刪除以下目錄和檔案

pages/logs/
pages/index/index.wxss

建立以下目錄和檔案

pages/detail/
pages/detail/detail.js
pages/detail/detail.wxml
pages/templates/
pages/templates/item.wxml
res/

現在你看到的目錄結構應該是這樣子的

.
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── detail
│   │   ├── detail.js
│   │   └── detail.wxml
│   ├── index
│   │   ├── index
 
.js
│   │   └── index.wxml
│   └── templates
│       └── item.wxml
├── res
└── utils
    └── util.js

目錄結構

這就是我們工程目錄的最終結構了，後面還會新增資源進去，但是整體結構還是這樣不會改變的

修改配置

微信小程式是通過修改app.json檔案改變全域性配置的，具體的可配置項請各位自行查閱小程式文件的配置一節

開啟app.json，修改成

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3e3e3e",
    "navigationBarTitleText": "歷史今日",
    "navigationBarTextStyle":"white"
  },
  "debug": true
}

我們這裡修改了導航欄的背景顏色(navigationBarBackgroundColor)、標題顏色(navigationBarTextStyle)以及標題內容(navigationBarTitleText)，為了方便檢視除錯資訊，我還開啟了debug模式

全域性配置以及搞定啦，接下來正式開始編碼

首頁佈局

前面已經說了我們要做的是「歷史上的今天」這樣的一個小程式，所以同一個日期會有很多條目，最常見的佈局就是做成列表

列表裡會有很多的條目，數量是不確定的，所以我們不能在頁面裡寫死了佈局，這時候就要用到模板(template)了，我們可以在模板中定義程式碼片段，然後在不同的地方呼叫

我們來定義一個模板，開啟pages/templates/item.wxml，新增程式碼

<template name="tItem">
    <navigator url="../detail/detail?id={{item.e_id}}">
        <view class="ui-list-item ui-pure-item ui-border-b">
            <view class="ui-item-span"><text>{{item.date}}</text></view>
            <view class="ui-item-content ui-nowrap"><text>{{item.title}}</text></view>
        </view>
    </navigator>
</template>

注: 模板的使用細節請參考官方文件模板一節

接下來開啟pages/index/index.wxml刪掉裡面的內容，我們要在這裡編寫列表頁，這裡會使用到我們上面定義的模板

<import src="../templates/item.wxml"/>

<scroll-view scroll-y="true" class="flex-row ui-list ui-border-t">
    <template is="tItem" data="{{item}}" wx:for="{{events}}"/>
    <view class="ui-tips">
        <view wx:if="{{hidden}}"><text>沒有更多內容了</text></view>
        <view wx:else><text>內容載入中...</text></view>
    </view>
</scroll-view>

<loading hidden="{{hidden}}">Loading...</loading>

可以注意到第一行使用了import將模板引入到頁面中，然後再使用is屬性，宣告需要使用的模板，用data屬性傳入資料供模板使用

注: 模板擁有自己的作用域，只能使用data傳入的資料

為了測試和檢視佈局效果，我們開啟pages/index/index.js刪除裡面的程式碼，然後新增以下程式碼手動建立資料傳入給頁面渲染

Page({
  data: {
    hidden: true,
    events: [
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      }
    ]
  }
})

儲存後點擊開發工具左側的編譯，即可檢視到效果


首頁佈局效果

注: 佈局會用到圖示字型，匯入到res/下，樣式則寫在app.wxss全域性樣式表中，圖示字型檔案和樣式請從原始碼中獲取，這篇教程不作樣式的說明

詳細頁面

首頁的佈局已經完成了，暫時放下首頁列表，接下來開始編寫詳細內容的頁面

開啟pages/detail/detail.wxml，新增內容如下

<view class="container">
    <view class="ui-title ui-border-b"><text>{{detail.title}}</text></view>
    <view class="ui-content"><text>{{detail.content}}</text></view>
    <block wx:for="{{detail.picUrl}}">
        <view>
            <view><image mode="aspectFit" src="{{item.url}}"/></view>
            <view class="ui-pic-title"><text>{{item.pic_title}}</text></view>
        </view>
    </block>
</view>
<loading hidden="{{hidden}}">Loading...</loading>

搞定，這個頁面就這麼簡單就OK了，現在我們開啟pages/detail/detail.js手動新增資料到這個頁面中檢視效果

Page({
  data:{
      hidden: true,
      detail: {
          title: "歷史上的今天",
          content: "歷史上的今天曆史上的今天曆史上的今天曆史上的今天曆史上的今天曆史上的今天曆史上的今天曆史上的今天曆史上的今天",
          picUrl: [
              {
                  url: "http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
                  pic_title: "這是圖片標題"
              }
          ]
      }
  }
})

詳細頁面效果

填充資料

現在頁面佈局都已經完成了，是時候呼叫API編寫邏輯層的程式碼來填充資料到頁面上了，在開始之前我們先清理一下無用的程式碼

開啟app.js刪掉無用的函式和屬性

App({

})

以上這步是額外步驟，並不影響我們接下來要做的事情

開啟utils/util.js並清空裡面的程式碼，新增如下內容

// 查詢事件列表的Base URL
const API_URL_L = "http://v.juhe.cn/todayOnhistory/queryEvent.php"
// 查詢詳細資訊的Base URL
const API_URL_D = "http://v.juhe.cn/todayOnhistory/queryDetail.php"
// 申請API獲得的KEY
const API_KEY = "YOUR API KEY"

// 獲取事件列表
function fetchEvents(today) {
    var promise = new Promise(function(resolve, reject){
        wx.request({
            url: API_URL_L,
            data: {
                key: API_KEY,
                date: today
            },
            header: {
                'Content-Type': 'application/json'
            },
            success: resolve,
            fail: reject
        })
    })
    return promise
}

function getEvents() {
    var tmpDate = new Date()
    var today = tmpDate.getMonth() + 1
    today = today + '/' + tmpDate.getDate()
    return fetchEvents(today)
        .then(function(res) {
            // console.log(res.data.result)
            return res.data.result
        })
        .catch(function(err) {
            console.log(err)
            return []
        })
}

// 獲取詳細資訊
function fetchDetail(e_id) {
    var promise = new Promise(function(resolve, reject){
        wx.request({
            url: API_URL_D,
            data: {
                key: API_KEY,
                e_id: e_id
            },
            header: {
                'Content-Type': 'application/json'
            },
            success: resolve,
            fail: reject
        })
    })
    return promise
}

function getDetail(e_id) {
    return fetchDetail(e_id)
        .then(function(res) {
            // console.log(res.data.result)
            return res.data.result
        })
        .catch(function(err) {
            console.log(err)
            return []
        })
}

module.exports = {
    getEvents: getEvents,
    getDetail: getDetail
}

注: 請將API_KEY的值替換為你申請到的KEY

我們要利用API獲取的資料有兩種，一是「事件列表」，另一種是事件對應的「詳細資訊」，上面使用到了ES6原生提供的Promise物件，具體請參考阮一峰的《JavaScript 標準參考教程（alpha）》中「Promise物件」一節

最後還用到了module.exports對外暴露兩個函式，使外部可以呼叫

我們繼續開啟pages/index/index.js檔案，修改成這樣

const util = require('../../utils/util.js')

Page({
  data: {
    hidden: false,
    events: []
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
    var self = this
    util.getEvents().then(function(data) {
      self.setData({
        hidden: true,
        events: data
      })
    })
  }
})

然後開啟pages/detail/detail.js，修改如下

const util = require('../../utils/util.js')

Page({
  data:{
      hidden: false,
      detail: {}
  },
  onLoad:function(param){
    // 頁面初始化 param為頁面跳轉所帶來的引數
    var self = this
    util.getDetail(param.id).then(function(result){
        self.setData({
            detail: result[0]
        })
    })
  },
  onReady:function(){
    // 頁面渲染完成
    wx.setNavigationBarTitle({
        title: this.data.detail.title
    })
    this.setData({
        hidden: true
    })
  }
})

這裡我們呼叫了wx.setNavigationBarTitle方法動態設定導航欄的標題內容，需要注意的是必須在頁面渲染完成之後，即onReady之後才能呼叫該方法修改導航欄標題

這次教程就到這裡結束啦～涉及到的部分知識點並沒有詳細介紹和說明，如果有不明白的地方請大家根據我給出的連結去檢視詳細的介紹，此文權當快速上手的一個引子，更加深入的內容以及小程式的其他API的使用，還需要各位親自去實踐。

參考連結



相關推薦

微信小程式開發初體驗--教你開發小程式

微信小程式 微信小程式面世以來受到的關注頗多，直到最近我才動手嘗試進行了小程式的開發，總體上感覺還是不錯的，有一點不適應的就是要擺脫Web APP開發對DOM的操作。在這裡我就把我是如何利用API開發微信小程式的過程寫成教程，教大家快速上手體驗一次微信小程式的開發。 補充

開發 | 手把手，教你在小程式裡做一個圓形進度條

今天想把之前在微信小程式開發過程中，製作的一個圓形進度條做成一個元件，方便以後直接拿來用。建立自定義元件一、建立專案結構開啟微信開發者工具建立一個專案， 新建 與 pages 同級目錄 components，在 components 中新建一個目錄 circle ，circl

通訊錄拉群/微信通訊錄打群/磊哥教你如何能夠精準引流。

（磊哥通訊錄拉群）今天給大家分享下心得，因為近處於微信的封號風波，大多的機房都已經不出通訊粉了，可做股票的公司每天沒粉，公司執行不下去，這對於做股票的來說就是致命的打擊，所以四處尋找通訊錄粉，這時候你會看到朋友圈會出現很多通訊錄拉群120/個，每天3000個群量，從沒那麼便宜的，讓他欣喜若狂

微信小程式之：雲開發初體驗--致我的第一個小程式

背景：一直關注微信小程式的發展，看著小程式一步步完善，一步步壯大，心裡癢癢，也想做一個自己的微信小程式，但是苦於只會前端，不會服務端，所以想法一直被卡著。現在小程式有了雲開發，很輕鬆實現後端功能，寫後端跟寫前端沒啥區別，真的是前端小夥伴們的福音啊。 經過幾個晚上的熬夜奮戰，我的第一個微信小程式正式

微信小程式開發——初體驗

放假在家無聊，稍微研究研究小程式 註冊賬號及配置 首先需要去“微信公眾平臺”註冊一個微信小程式開發賬號 注意上面四個中只能選擇一個，輸入要填的資訊之後一直確認確認就可以了。 登入後，可以開啟標題欄中的“文件”，第一欄的“介紹”，按照這個介紹可

微信小遊戲開發初體驗

1.環境搭建 官網下載安裝nodejs設定目錄，配置環境變數 2.註冊賬號下載下微信官方工具集啟動demo體驗 3.雲開發的版本會提示報錯 雲開發版本專案配置：開啟project.config.json將以下條目正確配置   "projectname":

共享單車微信小程式之初體驗

從Sensor裡面讀取經緯度，顯示對應的地理位置資訊 //index.wxml //相關屬性：latitude（緯度），longitude（經度） <map id='mymap' latitude='{{lat}}' longitude='{{l

微信小程式 之 初體驗（24點遊戲）

根據網上的教程，申請了小程式開發，試著玩玩哈。 主要熟悉了一下小程式開發，熟悉了下各個元件    主要寫了個九九乘法表、和24點計算 介面      { "pages": [ "page/index/index", "page/poker/

從0開始，手把手教你開發並部署上線一個知識測驗微信小程式

## 上線專案演示 微信搜尋[放馬來答]或掃以下二維碼體驗： ![](https://gitee.com/kamiba/images4mk2/raw/master/20200709074129.png) ## 專案原始碼 [ 專案原始碼](https://gitee.com/kamiba/wecha

微信支付開發初體驗

這段時間由於要進行微信公眾號相關的開發，故而接觸到了微信支付。老版本的V2公眾號微信支付比較難搞，有些東西不夠規範。新版本的微信支付統一了介面，文件也比較齊全，全部接入商戶平臺（pay.weixin.qq.com）。下面簡述一下微信公眾號現金支付的開發過程。 申請微信支付

微信開發初體驗

微信開發初體驗 1. 微信各大開發平臺介紹 平臺 介紹 各種相關連線 微信開放平臺 主要面對移動應用/網站應用開發者，為其提供微信登入、分享、支付等相關許可權和服務

微信小程式效能優化方案——讓你的小程式如此絲滑

微信小程式如果想要優化效能，有關鍵性的兩點： 提高載入效能 提高渲染效能 接下來分別來介紹一下： 提高載入效能 首先，問一個問題，當用戶點選小程式後發生了什麼？ 上圖中的三個狀態，我們經常遇到，它們分別對應小程式的下面三個狀態： 有三個點的白屏（左側）： 下載程式碼

微信H5 使用瀏覽器不能喚起支付寶小程式

記錄一下，自己遇到的一些問題： 業務需求：  h5放在微信公眾號 和 支付寶生活號裡面， 在公眾號登入H5時，點選付款需要進入 支付寶小程式 遇到的問題  ： 1.微信直接無法調起支付寶： 這邊可以參考微信公眾平臺無法使用支付寶收付款的解決方案整合：https:/

今日頭條挖角微信；中國 iPhone 購買意創新低；小程式將分級 | 極客頭條

「CSDN 極客頭條」，是從 CSDN 網站延伸至官方微信公眾號的特別欄目，專注於一天業界事報道。風裡雨裡，我們將每天為朋友們，播報最新鮮有料的新聞資訊，讓所有技術人，時刻緊跟業界潮流。 快訊速知 微信：將給小程式質量分級 訊息稱今日頭條將上線社交產品“飛聊

如何在微信公眾號裡預約駕校教練練車_小白教程

基於微信公眾號的駕校約車系統_預約管理軟體外包 使用會議室可以進行提前預約，參加培訓課程可以進行提前預約，場館參觀可以進行提前預約……“預約”正在越來越多的出現在我們的生活中。預約系統實現了商家和顧客的時間、資源精準匹配，為我們

教你再小的小門店也能社交電商-神手微信管理營銷軟體

神手微信管理營銷CRM教你再小的小門店也能社交電商！       現在大家有沒有發現一種現象，你去水果店買水果，去餐廳吃飯，他們除了放支付二維碼外，很多前臺還會再放一個二維碼，用來添加個人微信的或者公眾號的。 你結賬的時候，他們會引導你加，然後可以有優惠打折什麼的。

小白入門微服務(2) - 訊息佇列初體驗

概述 前言 訊息佇列使用場景 什麼是訊息佇列 常用訊息佇列庫對比 Kafka 初體驗 RabbitMQ 初體驗 後記 前言 前面兩篇我們學習了 - 小白入門微服務(0) - 什麼是微服務 - 小白入門微服務(1) - RP

Spring Freamwork 開發初體驗

true blog 連接 get 添加 ons xsd 行程 detail 工具 　　eclipse 　　　　版本：Neon.3 Release (4.6.3) 　　Spring Freamwork 　　　　版本：4.0.4.RELEASE 　　　　下載地

Android開發初體驗

pub warn android cor big row @+ result pre 第一個Androd應用-GeoQuiz,它能給出一道道地理問題，用戶點擊TRUE或FALSE按鈕來回答屏幕上的問題，GeoQuiz及時做出反饋，首先我們來看看它完成後的樣子 1.首先我們

mui框架移動開發初體驗

sta lex ont json navig onu listener pla 系統 前 言 　博主最近在接觸移動APP，學習了幾個小技巧，和大家分享一下。 1. 狀態欄設置