wx云开发练习

wx云开发

介绍

小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。

开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发。

优势：

• 快速上线
• 专注核心业务
• 独立开发一个完整的微信小程序
• 学习成本低，不需要学习新技术
• 无需关注系统运维
• 数据安全

能力概括：

• 储存数据与文件
• 运行后端代码
• 扩展能力
• 打通微信生态

基础概念

云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合（相当于关系型数据中的表），集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。

微信开发者工具云开发提供的时JSON数据库不是关系型数据库，与mysql数据库不同

关系型数据库和 JSON 数据库的概念对应关系如下表：

关系型	文档型
数据库 database	数据库 database
表 table	集合 collection
行 row	记录 record / doc
列 column	字段 field

存储

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。

在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。下面简单的几行代码，即可实现在小程序内让用户选择一张图片，然后上传到云端管理的功能：

// 让用户选择一张图片
wx.chooseImage({
  success: chooseResult => {
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
      // 指定上传到的云路径
      cloudPath: 'my-photo.png',
      // 指定要上传的文件的小程序临时文件路径
      filePath: chooseResult.tempFilePaths[0],
      // 成功回调
      success: res => {
        console.log('上传成功', res)
      },
    })
  },
})

wx.cloud.uploadFile

将本地资源上传至云存储空间，如果上传至同一路径则是覆盖写

请求参数

字段	说明	数据类型	必填
cloudPath	云存储路径，命名限制见文件名命名限制	String	Y
filePath	要上传文件资源的路径	String	Y
config	配置	Object	N
success	成功回调
fail	失败回调
complete	结束回调

success 返回参数

字段	说明	数据类型
fileID	文件 ID	String
statusCode	服务器返回的 HTTP 状态码	Number
errMsg	错误信息，格式 uploadFile:ok	String

fail 返回参数

字段	说明	数据类型
errCode	错误码	Number
errMsg	错误信息，格式 uploadFile:fail msg	String

云函数

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。

小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk提供的 getWXContext 方法获取到每次调用的上下文，无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态

资源环境

一个环境对应一整套独立的云开发资源，包括数据库、存储空间、云函数等资源。各个环境是相互独立的，用户开通云开发后即创建了一个环境，默认可拥有最多两个环境。在实际开发中，建议每一个正式环境都搭配一个测试环境，所有功能先在测试环境测试完毕后再上到正式环境。以初始可创建的两个环境为例，建议一个创建为 test 测试环境，一个创建为 release 正式环境。

创建项目

创建项目时后端服务选择小程序·云开发

一般在做开发时，一个环境用于测试，一个环境用于项目正式上线

创建环境

然后再在编辑目录的cloudfunctions文件夹上右击选择环境，

若没有新创建的环境，刷新或重启项目即可

在app.js文件中修改代码

//app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        env: 'test-0gfi70yg838b70d8',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

目录结构

wx小程序云开发目录：

没有使用云开发的项目目录：

使用第三方组件

相较于 vue要使用第三方组件，如 elementui、vanta 等，小程序官方提供了很多组件，可见简化我们
的开发
当然，我们页可以使用第三方组件，如 vant 、Vant Weapp

1.初始化配置文件

在项目根目录下执行命令

npm init -y

2.安装vant

npm i @vant/weapp -S --production

3.去除默认样式
删除 app.json 中的 “style”: “v2”，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

4.修改project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

5.构建npm包

构建之前先调整设置：在本地设置中勾选使用npm模块

再选择 工具=》构建 npm，构建完成后，会在我们上面设置的 miniprogram 目录下多出一个miniprogram_npm 目录

主要目录和文件

app.json：小程序跟目录下有一个 app.json ，这个是全局配置文件
pages目录：还有一个 pages 目录，里面是我们自己编写的一个个页面，其实就是页面级组件，跟
咱们 vue 项目中的 views 是一个意思
components目录：跟咱们 vue 项目一样，用于编写一些非页面级组件，也就是局部组件

pages：
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json , .js , .wxml , .wxss 四个文件进行处理
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）也就是说，我们在 index 中创建的所有页面都必须在这里注册
tabBar：
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

实现底部导航

先删除 pages 中无关的文件，全部删除即可
删除之后，将 app.json 中 pages 数组的内容清空
再编写新的文件

"pages": [
    "pages/music/music",
    "pages/blog/blog",
    "pages/profile/profile"
],

wxml：相当于我们以前学习的 html，只不过可以进行数据绑定，列表渲染等，其实就与我们学习的 vue 组件中的模板一样
.wxss：WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改，就相当于 vue 组件中的样式
.js：编写业务逻辑
.json：页面级的配置文件

通过 tabBar 配置底部导航栏

list 属性，配置底部导航显示的页面
color：tab 上的文字默认颜色，仅支持十六进制
selectedColor：tab 上的文字选中时的颜色，仅支持十六进制

"tabBar": {
    "color": "#474747",
    "selectedColor": "#d43c43",
    "list": [
      {
        "pagePath": "pages/music/music",
        "text": "音乐",
        "iconPath": "images/music.png",
        "selectedIconPath": "images/music-action.png"
      },
      {
        "pagePath": "pages/blog/blog",
        "text": "发现",
        "iconPath": "images/blog.png",
        "selectedIconPath": "images/blog-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "images/profile.png",
        "selectedIconPath": "images/profile-active.png"
      }
    ]
  }

属性列表

属性	类型	默认值	必填	说明
ext-class	string		否	添加在组件内部结构的class，可用于修改组件内部的样式
list	array		否	Tabbar的项的数组，按照规范，至少要有2个Tabbar项
current	number	0	否	当前选中的Tabbar项的下标
bindchange	eventhandler		否	Tabbar项发生改变的时候触发此事件，detail为{index, item}，index是Tabbar下标，item是对应的Tabbar项的配置

list属性是对象数组，每一项表示一个Tabbar项，其字段含义为

字段名	类型	默认值	必填	说明
text	string		是	Tabbar项的标题
iconPath	string		否	Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。
selectedIconPath	string		否	Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。
badge	string		否	是否显示Tabbar的右上角的Badge

修改顶部导航样式

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中配置项

window 属性

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 1。
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新

修改app.json中window配置

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#d43c43",
    "navigationBarTitleText": "天空music",
    "navigationBarTextStyle": "white"
},

配置轮播图

wxml文件：

<!-- 头部轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="
{{interval}}" duration="{{duration}}">
    <block wx:for="{{musicImgs}}" wx:key="id">
        <swiper-item>
        	<image src="{{item.url}}" mode="aspectFill" class="swiper-image"></image>
        </swiper-item>
    </block>
</swiper>

js文件：

data: {
    musicImgs: [
    { id: 1, url:
    'http://p1.music.126.net/kNbsPyUlG1eZD0sS73roSg==/109951165845335286.jpg' },
    { id: 2, url:
    'http://p1.music.126.net/e_7e3x4IYn7lT8NDjmSqPw==/109951165845336883.jpg' },
    { id: 3, url:
    'http://p1.music.126.net/BM6Ee4Xug8fqX0I5wxy3ag==/109951165845323485.jpg' }
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
},