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

時間 2019-11-09

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

原文原文鏈接

微信小程序

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

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

在開始以前咱們先來看下成品的效果圖html

完成效果預覽

準備工做

咱們先肯定想要開發一款什麼樣的小程序，首先要符合「小」，由於咱們此次是要體驗小程序的開發，因此儘可能不要弄得太複雜；其次是「快」，小程序裏須要的數據啊、資源啊，最好是現成就有的，本身寫個API什麼的這就太耗時了，就不叫快速上手了。java

因此呢，若是能調用現成的API那是極好的，通過一番挑選，我選擇了聚合數據的歷史上的今天這個API，調用這個API獲取數據，咱們只要作2個頁面就能夠徹底展現出來了，又「小」又「快」哈XDgit

API一枚: 「歷史上的今天」
微信小程序開發者工具

注: API須要註冊以後得到KEY才能使用，具體請查看聚合數據官方文檔，這裏默認各位已經註冊並擁有相應API所需的KEYes6

工程結構

微信開發者工具的安裝和使用在這裏就很少做介紹了，有疑問的話能夠看微信官方的簡易教程github

先建立一個工程，依次點擊「添加項目」－－「無AppID」，而後填好「項目名稱」並選擇「項目目錄」，點擊「添加項目」json

添加項目

而後咱們來清理一下默認工程的目錄結構，刪除如下目錄和文件小程序

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的使用，還須要各位親自去實踐，歡迎交流～