小程序學習（二）基本結構與文件的類型

小程序學習（二）基本結構與文件的類型

注：因為一些原因，之前學習了一段小程序之后就斷了，沒有繼續學習。現在開始繼續學習小程序的開發。

學習一些新的東西，一般都是從官方給出的dome案例開始學習的，官方給出的Dome一般比較容易理解，也有一些詳細的注解和官方的說明文檔，學習起來比較快。下面就開始學習小程序官方給出的Dome。

因為小程序的功能更新很快，可能你看到這個文章的時候，小程序已經推出了很多的新的功能。所以功能還是以官方最新的Dome為准。

 

一、下載Dome   

官方Dome 下載地址 。我下載的版本是2017011

 

二、打開Dome項目

使用小程序開發工具打開官方的Dome。打開工具，選擇小程序開發，選擇添加一個項目，將Dome項目添加進來。

添加項目時要填寫AppID，當然也可以不填寫，但是沒有AppID,一些功能可能會體驗不了，所以建議還是申請一個小程序的賬號。

賬號申請的流程和工具的使用，請看上一篇文章 小程序學習（一）入門學習 ，也可以看官方給出的說明。

下面就是項目打開后的界面，首先要了解的是整個程序的目錄結構和文件

 

三、了解小程序項目結構

折騰半天，終於可以一睹小程序真面目了。

首先在根目錄下，有四個文件夾 image、page、util、vendor和四個文件app.js、app.json、app.wxss、config.js

從名稱名稱看，比較容易理解

image ：存放圖片文件

page ：存放頁面文件

util ：一般存放一些公用、通用的工具

vendor ：一般存放一些第三方的組件，插件

文件應該都認識，js文件，json文件，只有一個wxss比較陌生。

其中 .js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件 （一般前端的樣式文件是css，這個叫wxss，我理解為"微信ss")

 

app.js

是小程序的腳本代碼。我們可以在這個文件中監聽並處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API。

可以理解成.Net中的Global文件。其中onLoauch、onShow、onHide、globalData分別為：頁面初始化、頁面顯示、頁面隱藏和全局數據。

getUserOpenId 是一個方法，獲取用戶的openId，給全局數據賦值。

const openIdUrl = require('./config').openIdUrl

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false,
    openid: null
  },
  // lazy loading openid
  getUserOpenId: function(callback) {
    var self = this

    if (self.globalData.openid) {
      callback(null, self.globalData.openid)
    } else {
      wx.login({
        success: function(data) {
          wx.request({
            url: openIdUrl,
            data: {
              code: data.code
            },
            success: function(res) {
              console.log('拉取openid成功', res)
              self.globalData.openid = res.data.openid
              callback(null, self.globalData.openid)
            },
            fail: function(res) {
              console.log('拉取用戶openid失敗，將無法正常使用開放接口等服務', res)
              callback(res)
            }
          })
        },
        fail: function(err) {
          console.log('wx.login 接口調用失敗，將無法正常使用開放接口等服務', err)
          callback(err)
        }
      })
    }
  }
})

 

app.json

是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口的背景色，配置導航條樣式，配置默認標題。

需要注意的一點是：該文件不可添加任何注釋，這個還是比較少見的。

{
  "pages": [
    "page/component/index",

    "page/component/pages/view/view",
    "page/component/pages/scroll-view/scroll-view",
    "page/component/pages/swiper/swiper",

    "page/API/pages/storage/storage"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "page/component/index",
      "iconPath": "image/icon_component.png",
      "selectedIconPath": "image/icon_component_HL.png",
      "text": "組件"
    }, {
      "pagePath": "page/API/index",
      "iconPath": "image/icon_API.png",
      "selectedIconPath": "image/icon_API_HL.png",
      "text": "接口"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": false
}

pages:注明該小程序下面所有的頁面，官方的dome遠不止上面這些頁面，我這里只是選擇一部分貼出。

window:默認頁面的窗口的標題、樣式等信息

tabBar:底部導航的樣式、菜單數量、菜單的圖標和鏈接頁面等信息

networkTimeout:各種網絡請求的超時時間

debug:是否開啟調試模式

 

app.wxss

整個小程序的公共樣式表。在所有的小程序頁面上可以直接使用該文件里面的樣式。這個里面樣式的寫法和CSS樣式的寫法基本是一致的，也支持CSS3的一些特性。

.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

 

config.js

小程序的配置文件。這個在之前的小程序中是沒有的。文件中主要的配置信息是一些連接服務器接口的地址。文件里推薦的騰訊雲的服務器，騰訊提供了現有的小程序后台的解決方案，可以直接部署在騰訊雲的服務器上使用。這里的相關配置也是參照騰訊提供的小程序后台設置的。有自己服務器的，也可以使用自己服務器上的后台接口地址。

 1 // 此處主機域名是騰訊雲解決方案分配的域名
 2 // 小程序后台服務解決方案：https://www.qcloud.com/solution/la
 3 
 4 var host = "14592619.qcloud.la"
 5 
 6 var config = {
 7 
 8     // 下面的地址配合雲端 Server 工作
 9     host,
10 
11     // 登錄地址，用於建立會話
12     loginUrl: `https://${host}/login`,
13 
14     // 測試的請求地址，用於測試會話
15     requestUrl: `https://${host}/testRequest`,
16 
17     // 用code換取openId
18     openIdUrl: `https://${host}/openid`,
19 
20     // 測試的信道服務接口
21     tunnelUrl: `https://${host}/tunnel`,
22 
23     // 生成支付訂單的接口
24     paymentUrl: `https://${host}/payment`,
25 
26     // 發送模板消息接口
27     templateMessageUrl: `https://${host}/templateMessage`,
28 
29     // 上傳文件接口
30     uploadFileUrl: `https://${host}/upload`,
31 
32     // 下載示例圖片接口
33     downloadExampleUrl: `https://${host}/static/weapp.jpg`
34 };
35 
36 module.exports = config

 

上面的一些都是一些全局的文件。下面看一下小程序頁面的文件結構。頁面一般都是存放Page文件夾下面，當然也可以存放在其他路徑下面。

小程序頁面主要分4個文件，分別為  index.js 、 index.json 、 index.wxml 、index.wxss。當我們創建一個小程序頁面時，會自動生成這4個文件。

 

index.js

頁面的腳本文件，在這個文件中我們可以監聽並處理頁面的生命周期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else {
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    }
  },
  getUserInfo: function(e) {
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

 

index.json

頁面的配置文件。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。

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

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

 

index.wxml

頁面的結構文件。頁面的編寫方式和HTML類似。不過里面的標簽種類不是很多。常用的就是view標簽，和div類似。下面使用到的標簽有 view、block、navigator、image 。

<view class="index">
  <view class="index-hd">
    <image class="index-logo" src="resources/kind/logo.png"></image>
    <view class="index-desc">以下將演示小程序接口能力，具體屬性參數詳見小程序開發文檔。</view>
  </view>
  <view class="index-bd">
    <view class="kind-list">
      <block wx:for-items="{{list}}" wx:key="{{item.id}}">
        <view class="kind-list-item">
          <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
            <view class="kind-list-text">{{item.name}}</view>
            <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
          </view>
          <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
            <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
              <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                <navigator url="pages/{{page.url}}" class="navigator">
                  <view class="navigator-text">{{page.zh}}</view>
                  <view class="navigator-arrow"></view>
                </navigator>
              </block>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>

 

index.wxss

當前頁面使用的樣式表文件，這個樣式表和之前我們看到的app.wxss不同。這個樣式文件只對當前頁面生效。

 

 

以上就是小程序的基本結構以及常用文件的類型和作用