Slog74_UI設計、整理和佈局GET！（微信小程序之雲開發-全棧時代5）

• ArthurSlog

• SLog-74

• Year·1

• Guangzhou·China

• September 16th 2018

• ArthurSlog Page

• GitHub

• NPM Package Page

• 掘金主頁

• 簡書主頁

• segmentfault

常道無名 唯德以顯之 至德無本 順道而成之 禍福無門 惟人自召 善惡之報 如影隨形

---

開發環境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

• 小程序官方文檔

• 小程序端API文檔（客戶端）

• 雲端API文檔（服務端）

前言

• 微信開發者工具版本： v 1.02.1809111

• ”雲開發“ 封裝好了一些常用的業務邏輯，提供了以下方面的相關API供開發者使用：

1. 雲函數

2. 數據庫

3. 存儲管理

開始編碼

• 現在先把微信開發工具更新至最新（1.02.1809101），有部分開發人員在微信社區反饋更新之後沒有看到“雲開發”的按鈕

• 解決辦法：點擊檢查更新，等待更新完全完成之後重啓開發工具

• 重點：雲開發方式需要appid，請準備好

• 當前雲開發模版的微信小程序文件結構如下：

cloudfunctions
    | - login
          | - index.js
          | - package.json
          | - package-lock.json
          
    | - arthurSlog_getInfo
          | - index.js
          | - package.json
          | - package-lock.json

    | - arthurSlog_methodAdd
          | - index.js
          | - package.json
          | - package-lock.json
          
miniprogram
    | - images
           | - code-db-inc-dec.png
           | - code-db-onAdd.png
           | - code-db-onQuery.png
           | - code-db-onRemove.png
           | - code-func-sum.png
           | - console-entrance.png
           | - create-collection.png
    | - pages
           | - addFunction
                    | - addFunction.js
                    | - addFunction.json
                    | - addFunction.wxml
                    | - addFunction.wxss
           | - chooseLib
                    | - chooseLib.js
                    | - chooseLib.json
                    | - chooseLib.wxml
                    | - chooseLib.wsxx
           | - databaseGuide
                    | - databaseGuide.js
                    | - databaseGuide.json
                    | - databaseGuide.wxml
                    | - databaseGuide.wxss
           | - deployFunctions
                    | - deployFunctions.js
                    | - deployFunctions.json
                    | - deployFunctions.wxml
                    | - deployFunctions.wxss
           | - index
                    | - index.js
                    | - index.wxml
                    | - index.wxss
                    | - user-unlogin.png
           | - storageConsole
                    | - storageConsole.js
                    | - storageConsole.json
                    | - storageConsole.wxml
                    | - storageConsole.wxss
           | - userConsole
                    | - userConsole.js
                    | - userConsole.json
                    | - userConsole.wxml
                    | - userConsole.wxss
    | - style
           | - guide.wxss
    | - app.js
    | - app.json
    | - app.wxss

README.md
project.config.json

• 本次來整理一下界面的佈局，首先在更新主頁面代碼如下：

Client：
miniprogram/pages/index/index.wxml

<!--index.wxml-->
<view class="container">

  <!-- 用戶 openid -->
  <view class="userinfo">
    <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})"></button>
  </view>

  <!-- 操作數據庫 -->
  <view class="uploader">
    <navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
      <text>前端操作數據庫</text>
    </navigator>
  </view>

  <!-- 獲取 openid -->
  <view class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSlog_getInfo">點擊獲取 openid</button>
  </view>
  <view class="showOpenid">
    <text class="textOpenid">openid：{{openid}}</text>
  </view>

  <!-- 返回兩個對象之和 -->
  <view class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSlog_methodAdd">點擊返回兩個對象之和</button>
  </view>
  <view class="showOpenid">
    <text class="textOpenid">8 + 8 = {{sumResult}}</text>
  </view>

  <!-- 上傳圖片 -->
  <view class="uploader">
    <button class="userinfo-nickname" bindtap="arthurSlog_uploadImg">上傳圖片</button>
  </view>
  <!-- 顯示圖片 -->
  <view>
    <image class="img" src="{{imagePath}}" mode="scaleToFill"></image>
  </view>

</view>

• 同時js文件如下，這跟vue是一樣的，在data裏添加對象供js和html做中介

• 不一樣是vue，data裏的對象是雙向綁定的，對象變，html文件裏的對象也會跟着變，頁面跟着渲染

• 但在小程序裏，你得使用 setdata函數來讓頁面重新渲染

• 完整代碼如下：

Client：
miniprogram/pages/index/index.js

//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: '',
    fileID: '',
    cloudPath: '',
    imagePath: './user-unlogin.png',
    openid:'',
    sumResult:'',
  },

  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }

    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })
        }
      }
    })
  },

  onGetUserInfo: function(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

  onGetOpenid: function() {
    // 調用雲函數
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[雲函數] [login] user openid: ', res.result.openid)
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[雲函數] [login] 調用失敗', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },

  // 上傳圖片
  doUpload: function() {
    // 選擇圖片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {

        wx.showLoading({
          title: '上傳中',
        })

        const filePath = res.tempFilePaths[0]

        // 上傳圖片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上傳文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath

            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上傳文件] 失敗：', e)
            wx.showToast({
              icon: 'none',
              title: '上傳失敗',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },
  // 添加前端代碼，向後端服務發起 名爲”arthurSlog_getInfo“方法的請求
  // 請求的結果會返回，並保存再 res對象中
  // 這裏我們把結果在控制檯打印出來
  // 返回appId 和 openId的數據，並保存在res對象中
  arthurSlog_getInfo: function() {
    const this_ = this
    wx.cloud.callFunction({
      name: 'arthurSlog_getInfo',
      complete: res => {
        console.log('callFunction test result: ', res)
        this_.setData({
          openid: res.result.openId
        })
      }
    })
  },
  // 添加前端代碼，向後端服務發起 名爲”arthurSlog_methodAdd“方法的請求
  // 請求的結果會返回，並保存再 res對象中
  // 這裏我們把結果在控制檯打印出來
  // 返回appId 和 openId的數據，並保存在res對象中
  arthurSlog_methodAdd: function() {
    const this_ = this
    wx.cloud.callFunction({
        // 雲函數名稱
        name: 'arthurSlog_methodAdd',
        // 傳給雲函數的參數
        data: {
          a: 8,
          b: 8,
        },
      })
      .then(res => {
        console.log(res.result)
        this_.setData({
          sumResult: res.result.sum
        })
      })
      .catch(console.error)
  },

  // 添加前端代碼,向雲端上傳圖片
  arthurSlog_uploadImg: function () {
    // 選擇圖片
    const this_ = this
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作爲img標籤的src屬性顯示圖片
        const tempFilePaths = res.tempFilePaths

        wx.showLoading({
          title: '上傳中',
        })

        this_.setData({
          imagePath: tempFilePaths[0],
        })

        console.log(tempFilePaths[0])

        const filePath = tempFilePaths[0]
        const cloudPath = 'ArthurSlog' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath, // 小程序臨時文件路徑
        }).then(res => {
          // get resource ID
          console.log(res.fileID) //success返回的fileID值    
          console.log(res.statusCode) //success返回的statusCode值
        }).catch(error => {
          // handle error
          console.error('[上傳文件] 失敗：', error)
          wx.showToast({
            icon: 'none',
            title: '上傳失敗',
          })
        }).then(() => {
          wx.hideLoading()
        })
      }
    })
  },
})

• 代碼的解析，請查看註釋，應該都不會太難理解的

• 如果有任何問題，歡迎大家留言交流

• 頁面的樣式，在wxss文件裏添加對字體的設置：

Client：
miniprogram/pages/index/index.wxss

.textOpenid{
  font-size:24rpx;
  word-break: break-all;
}

• 現在，請保存好更新過代碼的文件

• 接着，在模擬器裏對各個按鈕進行測試

1. 點擊“點擊獲取openid”，會在下方得到你的 openid

2. 點擊“返回兩個對象之和”，會在下方得到對象的和

3. 點擊“上傳圖片”，選擇圖片並“打開後”，圖片會上傳至雲端，同時在頁面上顯示出來

• 至此，我們對頁面進行了一個簡單的整理和佈局。

---

歡迎關注我的微信公衆號 ArthurSlog

如果你喜歡我的文章 歡迎點贊 留言

謝謝