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.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;
}

现在，请保存好更新过代码的文件
接着，在模拟器里对各个按钮进行测试

点击“点击获取openid”，会在下方得到你的 openid
点击“返回两个对象之和”，会在下方得到对象的和
点击“上传图片”，选择图片并“打开后”，图片会上传至云端，同时在页面上显示出来

至此，我们对页面进行了一个简单的整理和布局。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slog74_UI设计、整理和布局GET！（微信小程序之云开发-全栈时代5）.Markdown

Slog74_UI设计、整理和布局GET！（微信小程序之云开发-全栈时代5）.Markdown

Slog74_UI设计、整理和布局GET！（微信小程序之云开发-全栈时代5）

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

前言

开始编码

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章欢迎点赞留言

谢谢

Files

Slog74_UI设计、整理和布局GET！（微信小程序之云开发-全栈时代5）.Markdown

Latest commit

History

Slog74_UI设计、整理和布局GET！（微信小程序之云开发-全栈时代5）.Markdown

File metadata and controls

Slog74_UI设计、整理和布局GET！（微信小程序之云开发-全栈时代5）

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

前言

开始编码

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

如果你喜欢我的文章欢迎点赞留言