关于前端:2020年小程序开发云开发技术总结

39次阅读

共计 27790 个字符，预计需要花费 70 分钟才能阅读完成。

2020 年注定是不平庸的一年，一场冠状疫情的暴发，让人们忽然意识到生命的可贵，人们对生命从新有了新的意识。谱写了太多的悲伤，太多惆怅，太多的眼泪和辛酸。珍惜当下，敬畏生命，敬畏天然。

上面围绕这些标准写内容

  • 文章的创新型
  • 文章的实用性

 – 代码的可借鉴性

  • 代码的标准度

小程序云开发入门到实际：

wx.cloud.init({
  // env 参数：//   env 参数
  //   小程序发动的云开发调用（wx.cloud.xxx）会默认申请到哪个云环境的资源
  //   此处请填入环境 ID, 环境 ID 可关上云控制台查看 如不填则应用默认环境（第一个创立的环境）// env: 'my-env-id',
  traceUser: true,
})

wx.cloud.init({
  env: 'da-da',
  traceUser: true,
})

云函数的配置与部署

1. 下载安装 node.js，node.js 是在服务端运行 JavaScript 的运行环境，云开发所应用的服务端环境是 node.js,npm 是 Node 包管理器，通过 npm 能够不便的装置云开发所应用的依赖包。

node --version
npm --version
关上电脑终端（Windows 电脑为 cmd 命令提示符，Mac 电脑为终端 Terminal）

如果用淘宝镜像 cnpm

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm --version

上传到云存储的文件都有一个全网惟一的 fileID，fileID 只用于小程序外部，能够将 fileID 传入到 SDK 就能够对文件进行下载，删除，获取文件信息等操作，十分不便。

<image src="fileID"></image>

体验一下函数的调用：

能够获取用户的 openid，用户在小程序里有举世无双的 openid，雷同的用户在不同的小程序 openid 也不同，因而咱们能够用 openid 来辨别用户，能够应用云函数的 Cloud.getWXContext()来获取用户的 openid

获取用户信息：

<button 
  open-type="getUserInfo" 
  bindgetuserinfo="onGetUserInfo"
  class="userinfo-avatar"
  style="background-image: url({{avatarUrl}})"
  size="default"
></button>

onLoad: function() {
  // 获取用户信息
  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.data.logged && e.detail.userInfo) {
    this.setData({
      logged: true,
      avatarUrl: e.detail.userInfo.avatarUrl,
      userInfo: e.detail.userInfo
    })
  }
},

小程序的 open-data 能够用于展现微信用户的信息，能够在 miniprogram 目录 index 文件夹下的 index.wxml 文件：

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
<open-data type="userCity" lang="zh_CN"></open-data>
<open-data type="userProvince" lang="zh_CN"></open-data>
<open-data type="userCountry" lang="zh_CN"></open-data>

学习小程序开发 - 云开发我感觉挺好，上面总结一下：

小程序是一种新的凋谢能力，开发者能够疾速地开发一个小程序，小程序能够在微信内被便捷地获取和流传，同时具备杰出的应用体验。

第一，速度快，无需下载安装，加载速度快于 HTML5，微信登录，随时可用；第二，无需适配，一次开发，多端兼容，罢黜了对各种手机机型的适配；第三，反对间接或 app 分享给微信好友和群聊；第四，可达到近乎原生 app 的操作体验和晦涩度，在离线状态亦可应用；第五，用完即走，顺手可得，通过扫码，长按，微信搜寻，公众号，好友举荐等形式疾速获取服务，用完即走；第六，低门槛，已有公众号的组织可疾速注册，可疾速生成门店小程序。

小程序的技术倒退过程：

HTML5：能力很少；体验差；强烈依赖于开发者的素质

H5+JSSDK：无奈管控；平安问题；依赖开发者素质

小程序：强治理；对立开发体验

小程序语言：

渲染层：WXML+WXSS

逻辑层：JavaScript

配置：JSON

小程序设计标准：

敌对：重点突出，流程明确

清晰：导航明确，缩小期待，异样反馈

便捷：缩小输出，防止误操作，操作晦涩

对立：视觉对立，WeUI

小程序经营标准：

账号信息：名称形容清晰，与性能统一，资料实在

服务类目：类目与页面内容统一，便捷可用

性能：残缺可用，无举荐、排行榜，无搜寻小程序，不互推

数据：获取用户数据时需告知，不得私下收集用户数据

个别如果你关上一个小程序我的项目报错如下：

未找到入口 app.json 文件，或者文件读取失败，请查看后从新编译。

别怕是因为你须要理解小程序文件构造：

小程序蕴含一个形容整体程序的 app 和多个形容各自页面的 page。

app.js 是小程序逻辑，app.json 是小程序公共设置，app.wxss 是小程序公共样式表。

什么是组件，组件是以某种形式对业务逻辑和性能进行封装。

slot

component.wxml

<!-- 组件模板 -->
<view class="wrapper">
 <view> 组件的外部节点 </view>
 <slot></slot>
</view>

page.wxml
// 援用组件的页面模板
<view>
 <component-tag-name>
  <view> 插入到组件 slot 中的内容 </view>
 <component-tag-name>
</view>

多 slot

component.js

Component({
 options: {multipleSlots: true // 在组件定义时的选项中启用多 slot 反对},
 properties: { },
 methods: {}})

component.wxml

// 组件模板
<view class="wrapper">
 <slot name="before"></slot>
 <view> 组件的外部细节 </view>
 <slot name="after"></slot>
</view>

// 援用组件的页面模板
page.wxml
<view>
 <component-tag-name>
  // 这部分内容将被搁置在组件 <slot name="before"> 的地位上 -->
  <view slot="before"> 这里是插入到组件 slot name="before" 中的内容 </view>
  // 这部分内容将被搁置在组件 <slot name="after"> 的地位上 -->
  <view slot="after"> 这里是插入到组件 slot name="after" 中的内容 </view>
 </component-tag-name>
</view>

说说云开发是什么？

云开发是微信团队联结腾讯云提供的原生 Serverless 云服务，致力于帮忙更多的开发者疾速实现小程序业务的开发，疾速迭代。

一行代码创立数据：

db.collection('todos').add({
 data: {
  description: 'learn cloud dadaqianduan.cn',
  done: false
 },
 success(res){console.log(res)
 }
})

一行代码查问数据

db.collection('todos').doc('todoidentifiant-aleatoire').get({success(res) {console.log(res.data)
 }
})

云开发 QuickStart 界面：

点击获取 openid：

跟着提醒操作能够查看：

点击上传图片

前端操作数据库

新增记录
onAdd: function() {const db = wx.cloud.database()
 db.collection('counters').add({
  data: {count: 1},
  success: res => {
   // 在返回后果中会蕴含新创建的记录的_id
   this.setData({
    counterId: res._id,
    count: 1
   })
   wx.showToast({title: '新增记录胜利',})
   console.log('新增')
  },
  fail: err => {
   wx.showToast({
    icon: 'none',
    title: '新增失败'
   })
   console.error('失败')
  }
 })
}

onAdd 办法会往 counters 汇合新增一个记录，新增如下格局的一个 JSON 记录：

{
  "_id": "数据库主动生成记录 ID 字段",
  "_openid": "数据库主动插入记录创建者的 openid",
  "count": 1
 }
// 查问
 onQuery: function() {const db = wx.cloud.database()
 // 查问以后用户所有的 counters
 db.collection('counters').where({_openid: this.data.openid}).get({
  success: res => {
   this.setData({queryResult: JSON.stringify(res.data, null, 2)
    })
    console.log('')
   },
   fail: err => {
    wx.showToast({
     icon: 'none',
     title: '失败'
    })
    console.log('');
   }
  })
 }
// 更新
onCounterInc: function() {const db = wx.cloud.database()
 const newCount = this.data.count + 1
 db.collection('counters').doc(this.data.counterId).updata({
  data: {count: newCount},
  success: res => {
   this.setData({count: newCount})
  },
  fail: err=>{
   icon: 'none',
   console.error('')
  }
 })
},

onCounterDec:function() {const db = wx.cloud.database()
 const newCount = this.data.count - 1
  db.collection('counters').doc(this.data.counterId).updata({
  data: {count: newCount},
  success: res => {
   this.setData({count: newCount})
  },
  fail: err=>{
   icon: 'none',
   console.error('')
  }
 })
}

删除性能

onRemove: function() {if (this.data.counterId) {const db = wx.cloud.database()
      db.collection('counters').doc(this.data.counterId).remove({
        success: res => {
          wx.showToast({title: '删除胜利',})
          this.setData({
            counterId: '',
            count: null,
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '删除失败',
          })
          console.error('[数据库] [删除记录] 失败：', err)
        }
      })
    } else {
      wx.showToast({title: '无记录可删，请见创立一个记录',})
    }
  },

疾速创立云函数

// 云函数入口函数
exports.main = async (event, context) => {console.log(event)
  console.log(context)
  return {sum: event.a + event.b}
}

开发云我的项目，进行 QuickStart 小程序革新：

须要把 miniprogram 文件夹下的 pages,images,components,style 文件夹里的文件，文件夹都要状况，app.wxss 里的款式代码都要清空，将 app.json 的 pages 配置项设置为：

"pages": ["pages/index/index"],

云开发我的项目目录：

project // 你的小程序我的项目
├── cloudfunctions // 云函数根目录
│   └── login //login 云函数目录，能够通过右键云函数根目录来新建
├── miniprogram // 你原有的小程序文件寄存的目录
└── project.config.json

在 project.config.json 增加 miniprogramRoot 配置

"cloudfunctionRoot": "cloudfunctions/",
"miniprogramRoot":"miniprogram/",
小程序的文件构造

设置小程序窗口体现
"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "black"
},

底部都有一个 带有小图标 的切换 tab，icon 大小限度为 40kb，倡议尺寸为 81px * 81px，留神格局要是 png 哦

小程序的根目录：

├── image  
├── pages 
├── utils 
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json
相对路径与绝对路径
./ 代表当前目录 <img src=”./img/icon.jpg”/> 等同于 <img src=”img/icon.jpg”/>
../ 代表上一级目录
/ 指的是以后根目录，是绝对目录；<img src=”/img/icon.jpg”/>

应用 uniCloud

首先将 cli 我的项目导入 HBuilderX，在我的项目根目录（src 同级）创立 cloudfunctions-aliyun 或者 -tcb 目录，而后关上 src/manifest.json，在根底配置，uni-app 利用示意，处点击从新获取。

<template>
  <view class="content">
    <view class="btn-list">
      <button type="primary" @click="fun">test</button>
    </view>
  </view>
</template>

<script>
export default {data() {
        return {imageSrc: ''}
    },
    methods:{fun:function () {console.log('函数运行......');
            uni.showLoading();
            uniCloud.callFunction({
                name:"add",
                data:{
                    name:"graceUI",
                    age : 20
                }
            }).then((res)=>{uni.hideLoading();
                console.log(res);
                var msg = res.result;
                uni.showToast({title:msg.msg})
            });
        }
    }
}
</script>
<style>
.btn-list{margin:25rpx;}
</style>

uniapp 搭建云开发服务项目

创立云服务空间，右键关上 cloudfunctions 创立云服务空间 会关上 web 控制台

创立的云函数，所有操作都是右键上传或者部署云函数

下面讲到 uniCloud，那么什么是 uniCloud 呢？

uniCloud 是 Dcloud 联结阿里云，腾讯云，为 uniapp 的开发者提供的基于 serverless 模式和 js 编程的云开发平台

uniCloud 的益处在于用相熟的 js，轻松搞定前台整体业务。不论用什么服务器运维，弹性扩容，防 DDos 攻打，全都不须要操心

其实客户端调用云函数，如下：

uniCloud.callFunction()// 调用

云开发 api-云开发 API

wx.cloud
wx.cloud.database()
wx.cloud.database().command
wx.cloud.database().command.aggregate
提前发动权限设置
wx.authorize({
  scope: 'scope.record',
  success () {
    // 用户曾经批准小程序应用录音性能，后续调用 wx.startRecord 接口不会弹窗询问
    wx.startRecord()}
})

1. 云开发 api 分类

2. 云开发 api 初始化办法

3. 云开发 api 应用注意事项

初始化 服务端
npm install --save wx-server-sdk

const cloud = require('wx-server-sdk')
cloud.init({env: 'test-x' // 环境 id})

云开发的初始化选项反对传入一个 Object，指定各个服务应用的默认环境

云开发 api 应用注意事项：

1. 云开发 api 同时反对 callback 格调和 promise 格调

2. 云开发 api 初始化时如果没有设置 id，默认应用先创立的那个

3. 在服务端能够借助云开发 sdk 内置的 getWXContext 来获取到用户的身份信息

云开发数组查问

const db = wx.cloud.database();
const _ = db.command;

db.collection("todos")
.where({progress: _.in([0,100])
})
.get({
 success: console.log,
 fail: console.error
});

Index.js

const db = wx.cloud.database();
const _ = db.command
Page({query: function() {console.log('query')
  db.collection('data')
  .where({count: _.nin([1,3,4])
  })
  .get().then(console.log)
 }
})
理解网络状态
wx.getNetworkType({success(res) {console.log(res)
  }
});
所在的手机以后的网络状态是 WiFi、3G、4G、5G
获取设施信息
wx.getSystemInfo({success (res) {console.log("设施的所有信息",res)
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})
获取用户手机的微信版本、操作系统及版本、屏幕分辨率、设施的型号与品牌、根底库版本等信息。
页面链接跳转
wx.navigateTo({url: '/pxxx'})

wx.navigateBack({delta: 1})
返回页面的上一层
显示音讯提示框
wx.showToast({
  title: '弹出胜利',
  icon: 'success',
  duration: 1000
})
设置以后页面的题目
wx.setNavigationBarTitle({title: 'xxxx'})
关上文件选择器上传文件
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {const tempFilePaths = res.tempFilePaths}
})

小程序上获取用户信息的四种模式

wx.login -> 获取 code 仅可用于获取 openid, unionid 和 session\_key

button -> 用户首次需应用按钮模式，提醒用户被动点击按钮，方可获取用户信息

wx.getUserInfo -> 用户首次受权后，调用该接口能够获取用户信息，openid 和 unionid，需调用 session\_key 解密前方可取得

open-data -> 仅可用于展现用户数据，js 逻辑层无奈获取

小程序云开发：

云函数：wx.cloud.callFunction；数据库：wx.cloud.database；文件存储：wx.cloud.uploadFile

第一步创立云开发，其目录构造：

云函数：cloudfunctions

前端代码：miniprogram

图片等资源：images

页面目录: pages

全局配置：app.js – app.json

全局款式文件：app.wxss

我的项目配置文件：project.config.json

我的项目里应用创立的环境，在 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',
        traceUser: true,
      })
    }

    this.globalData = {}}
})

b

其实调用云函数文件：

sum() {
 wx.cloud.callFunction({
  name: 'sum',
  data: {
   a: 2,
   b: 5
  }
 }).then(res=>{console.log(res);
 }).catch(err=>{console.log(err);
 });
}

获取以后用户 openid：

<view> 云函数 </view>
<button bindtap="getOpenId"> 获取以后用户 openid</button>
getOpenId() {
 wx.cloud.callFunction({name: 'login'}).then(res=>{console.log(res);
 }).catch(err=>{console.log(err);
 })
}

批量删除的代码是怎么写的呢，如下：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database();

// 云函数入口函数

exports.main = async(event, context) => {
 try{return await db.collection('user').where({name: 'jeskson'}).remove()}catch(e){console.log(e);
 }
}

getDelete() {
 wx.cloud.callFunction({name: 'bataDelete',}).then(res=>{console.log(res);
 }).catch(err=>{console.error(err);
 })
}

云开发模式：

小程序端 -》原生接口 -》云开发：云数据库，云函数，云存储，云调用，HTTP API

创立数据库：

能够在 uniCloud 中间接创立，也能够通过 node.js 的后盾代码来创立，在 uniapp 中，为了平安起见，是不容许客户端间接调用数据库，而是通过客户端调用云函数，元函数调用数据库的模式

数据库和汇合的援用：

  const db=uniCloud.database();
  const ban=db.collection('汇合名');// 汇合名就是数据表的名称
  db.createCollection(collectionName)// 创立汇合

数据库的增删改查

  const db=uniCloud.database();
  const ban=db.collection('汇合名');
  
  ban.get().then(res=>{console.log(res)
  }).catch(msg=>{console.log(msg)
  });
  // 获取汇合中的数据，promise 写法
  
  ban.get({sucess:(res)=>{console.log(res)
  },
  fail:(msg)=>{console.log(msg)
  }
  });
  // 第二种写法
  // 这里只简略的介绍，具体的可查看 官网文档
  ban.where({
    name:"查问的 name"，index：查问的下标等  
  }).get().then(res=>{console.log(res)
  }).catch(e=>{console.log(msg)
  });
  
  // 增加
  ban.add({
    data:{
        id: 要增加的 id，name：要增加的 name
    }
  }).then(res=>{console.log(res)
  }).catch(e=>{console.log(msg)
  });
  
// 更新
  ban.doc('id').update({
    data:{name:'要替换的属性名'}
  }).then(res=>{console.log(res)
  }).catch(e=>{console.log(msg)
  });
  
  ban.doc('id').set({
    data:{
      name:'要替换的属性名'，id：要替换的 id 名
    }
  }).then(res=>{console.log(res)}).catch(e=>{console.log(msg)});
  
// 删除数据，只能每次删除一条
  ban.doc('id').remove({}).then(res=>{console.log(res)
  }).catch(e=>{console.log(msg)
  });

云存储：uploadFile(Object object)

uni.chooseImage({
 count: 1,
 success: (res) => {console.log(res);
  var path=res.tempFilePaths[0];// 获取以后图片的门路
  uniCloud.uploadFile({
   filePath: path, // 以后图片门路
   cloudPath: 'img', // 文件名
   success: (res1) => {console.log(res1);
   }
  })
 }
})

// promise 写法
const result = await uniClound.uploadFile({filePath: filePath});

deleteFile(Object object) 删除云端文件

  // promise 写法
uniCloud
  .deleteFile({fileList: ['云贮存的 ID']；// 字符串类型的数组
  })
  .then(res => {});

// callback 写法
uniCloud.deleteFile(
  {fileList: ['云贮存的 ID'],
    success(){},
    fail(){},
    complete(){}
  }
);

客户端调用云函数：

  //index.js 云函数文件
  'use strict'; 
  uniCloud.init();
  
  const db=uniCloud.database();
  exports.main = async (event, context) => {return new Promise((resolve,reject)=>{db.collection('banner').get().then(res=>{resolve(res);
    }).catch(msg=>{reject(msg);
    })
  })
};

  onLoad() {
          uniCloud.callFunction({// 客户端调用云函数，云函数调用数据库
              name:'index',
              success:(res)=> {console.log(res);
                  var ban=res.result.data[0].banner;
                  console.log(ban);
              }
          })
  },

uni-app 应用微信小程序云函数的步骤

批改 manifest.json

"mp-weixin" : {
        /* 小程序特有相干 */
        "appid" : "4555xxxxxxxx",
        "cloudfunctionRoot": "./functions/", 
        "setting" : {"urlCheck" : false},
        "usingComponents" : true
    }

装置 copy-webpack-plugin 插件

npm install -save copy-webpack-plugin;

讲列表索引：

<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}}
</view>

其中

*this 示意在 for 循环中的 item 自身，而 {{item}} 的 item 是默认的。
<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  {{title}}
</view>
  1. block 并不是一个组件，只是一个包装元素，不会在页面中做任何渲染，只承受管制属性
!0  // 返回 true
!true  // 返回 false
!false  // 返回 true
!''  // 返回 true
!'yes'  // 返回 false
!["ok"] // 返回 false
!{} // 返回 false
!!true   // 返回 true
!!{}     // 返回 true，!!false  // 返回 false
!!""     // 返回 false

hidden 属性：

<view wx:if="{{false}}"> 组件不显示不渲染 </view>
<view hidden="{{true}}"> 组件不显示 </view>
<view hidden> 组件不显示 </view>
<view hidden="{{false}}"> 组件显示 </view>

audio 组件，是音频组件：

  • src：要播放音频的资源地址
  • poster：默认控件上的音频封面的图片资源地址
  • name：默认控件上的音频名字
  • author：默认控件上的作者名字

video 组件，是示意视频的组件：

  • autoplay：是否自动播放
  • loop：是否循环播放
  • muted：是否静音播放
  • inital-time：指定视频初始播放地位，单位是秒
  • controls：是否显示默认播放控件

地图：

<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers="{{covers}}"
  show-location
></map>

latitude: 2xxx.5xxxx3,
longitude: 1xx.xxx28,
markers: [{
  id: 1,
  latitude: xxx2.5xxxxx,
  longitude: 1xxx.xxx28,
  title: '深圳 xxx'
}],

在地图上标记多个点

markers: [{
  id: 1,
  latitude: xxx2.5xxxxx,
  longitude: 1xxx.xxx28,
  title: '深圳 xxx'
  },
  {...
  1. callout: 点击 marker 呈现气泡 callout、以及气泡上的 label
  2. circle：在地图上显示圆，比方用于显示方圆几公里
  3. polygon：指定一系列坐标点，比方圈出理论的范畴
  4. polyline：指定一系列坐标点，比方跑步的路线

转发性能：

onShareAppMessage: function (res) {if (res.from === 'button') {console.log(res.target)
  }
  return {
    title: '云开发',
    path: "pages/home/home",
    imageUrl:"https://happ.jpg",
    success: function (res) {// 转发胜利},
    fail: function (res) {// 转发失败}
  }
},

自定义顶部导航栏

"window":{"navigationStyle":"custom"}

小程序的客服

<button open-type="contact"></button>

web-view 承载网页的容器。

<web-view src="https://mp. zxxx"></web-view>
获取用户信息
<button open-type="getUserInfo"> 弹出受权弹窗 </button>

音讯弹框

  wx.showToast({
    title: '胜利',
    icon: 'success',
    duration: 2000
  })
  
  title
  icon：只有三个选项，success、loading、none
  duration：提醒提早的工夫 1.5 秒
弹出模态对话框
  wx.showModal({
    title: '学习',
    content: '学习',
    showCancel: true,
    confirmText: '确定',
    success(res) {if (res.confirm) {console.log('用户点击了确定')
      } else if (res.cancel) {console.log('用户点击了勾销')
      }
    }
  })
  
  title 属性不是必填
  content 属性也不是必填
  showCancel 默认值就是 true
  confirmText 默认值为确定

手机振动

手机振动 API 分两种，一种是长振动，一种是短振动

  wx.vibrateLong({success(res) {console.log(res)
    },
    fail(err) {console.error(err)
    },
    complete() {console.log('振动实现')
    }
  })

弹出操作菜单

  wx.showActionSheet({itemList: ['1', '2', '3', '4'],
    success(e) {console.log(e.tapIndex)
    }
  })

页面路由

redirectTo 敞开以后页面，跳转到利用内的某个页面。然而不容许跳转到 tabbar 页面
navigateTo 保留以后页面，跳转到利用内的某个页面。然而不能跳到 tabbar 页面
navigateBack 敞开以后页面，返回上一页面或多级页面。
switchTab 跳转到 tabBar 页面，并敞开其余所有非 tabBar 页面
reLaunch 敞开所有页面，关上到利用内的某个页面

生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次

App({onLaunch: function (options) {// 监听小程序初始化},
  onShow:function(options){// 监听小程序启动或切前台},
  onHide:function(){      // 监听小程序切后盾},
  onError:function(msg){// 谬误监听函数},
  onPageNotFound:function(){ // 页面不存在监听函数},
  onUnhandledRejection:function(){// 未解决的 Promise 回绝事件监听函数},
  onThemeChange:function(){// 监听系统主题变动}
})

页面的生命周期函数：

Page({data: {// 页面的初始数据},
  onLoad: function(options) {// 监听页面加载},
  onShow: function() {// 监听页面显示},
  onReady: function() {// 监听页面首次渲染实现},
  onHide: function() {// 监听页面暗藏},
  onUnload: function() {// 监听页面卸载},
  onPullDownRefresh: function() {// 监听用户下拉动作},
  onReachBottom: function() {// 页面上拉触底事件的处理函数},
  onShareAppMessage: function () {// 用户点击右上角转发},
  onPageScroll: function() {// 页面滚动触发事件的处理函数},
  onResize: function() {// 页面尺寸扭转时触发},
  onTabItemTap:function(){// 以后是 tab 页时，点击 tab 时触发}
})
onLaunch 与 onShow

onLaunch 是监听小程序的初始化，初始化实现时触发，全局只会触发一次

onShow 是在小程序启动，或从后盾进入前台显示时触发，也就是它会触发很屡次

正在加载中

App({onLaunch: function () {
    wx.showLoading({title: "正在加载中",})
  },
  globalData: {}})

App({onLaunch: function () {
    wx.showLoading({title: "正在加载中",})
  },
  onShow (options) {
    wx.hideLoading({success: (res) => {console.log("加载实现，所以暗藏掉了")
      },
    })
  },
  globalData: {}})
小程序关上场景值
App({onLaunch: function (options) {console.log('打印小程序启动时的参数',options)
  },
})

path: "" // 页面门路
query: {} // 页面的参数
referrerInfo: {} // 起源小程序、公众号或 App 的 appId
scene: 1047 // 场景值
shareTicket: // 带 shareTicket 的转发能够获取到更多的转发信息，例如群聊的名称以及群的标识 openGId

理解 wx.login、wx.getSetting

App({onLaunch: function () {
    wx.login({success(res){console.log('wx.login 失去的数据',res)
      }
    })
 
    wx.getSetting({success(res){console.log('wx.getSetting 失去的数据',res)
      }
    })
  },
 
  globalData: {userInfo: null}
})

获取用户信息 wx.getUserInfo

首先须要判断用户是否容许

wx.getSetting({success(res){console.log('wx.getSetting 失去的数据',res)
    if (res.authSetting["scope.userInfo"]){
      wx.getUserInfo({success(res){console.log("wx.getUserInfo 失去的数据",res)
        }
      })
    }
  }
})

UserInfo

用户信息

属性

string nickName

用户昵称

string avatarUrl

用户头像图片的 URL。

number gender

用户性别

string country

用户所在国家

string province

用户所在省份

string city

用户所在城市

string language

显示 country，province，city 所用的语言

globalData

wx.getUserInfo({success(res){console.log("wx.getUserInfo 失去的数据",res)
    this.globalData.userInfo = res.userInfo
  }
})
Promise 调用形式
wx.getNetworkType() 
  .then(res => {console.log(res)
  })
  .catch(err => {console.log(err)
  })

云函数入门

const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {
  const sum = event.a + event.b
  return sum
}
云函数的调用
wx.cloud.callFunction({
  name: 'sum',    
  data: {        
    a: 15,
    b: 23,
  }
}).then(res => {console.log("云函数返回的后果",res)
}).catch(err => {console.log("云函数调用失败",err)
})

wx-server-sdk 是微信小程序服务器端的 SDK

SDK 包含用于微信免鉴权的公有协定、云数据库、云存储、云调用等根底能力，因而每一个云函数都会应用到 wx-server-sdk 这个 Node 包。

云函数的初始化
const cloud = require('wx-server-sdk')
cloud.init({env: 'x' // 换成你的云函数 envId})
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV // 留神它不是字符串，不要加引号})
cloud.DYNAMIC_CURRENT_ENV 标记的是云函数以后所在的环境
const cloud = require('wx-server-sdk')
cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})
exports.main = async (event, context) => {const {width,height} = event
  console.log("长方形的周长与面积",[(width+height)*2,width*height])
  return {circum:(width+height)*2,
    area:width*height
  }
}

云数据库入门

wx.cloud.database().collection('汇合名').where({_id:'记录的 id'}).update({"字段名":"字段值"})

wx.chooseImage()

<button bindtap="chooseImg"> 抉择图片 </button>
<image mode="widthFix" src="{{imgurl}}"></image>
<view> 上传的图片 </view>

chooseImg:function(){
  const that=this
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      const imgurl = res.tempFilePaths
      that.setData({imgurl})
    }
  })
},

count：能够抉择的照片数量，默认为 9 张

sourceType：抉择图片的起源，album 就是图片能够来自手机相册；而 camera 是能够来自手机拍照

sizeType

所选的图片的尺寸，original 为原图，compressed 为压缩图

tempFilePaths为临时文件的 门路列表 ，tempFiles 为长期 文件列表

image 组件有默认宽度 300px、高度 225px

上传多张照片
data: {imgurl:[],
},
<view wx:for-items="{{imgurl}}" wx:for-item="item" wx:key="*this">
  <image mode="widthFix" src="{{item}}"></image>
</view>
获取图片信息
wx.getImageInfo()
chooseImg:function(){
  let that=this
  wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
      const imgurl = res.tempFilePaths
      console.log('chooseImage 回调打印的 res',res)
      that.setData({imgurl})
      wx.getImageInfo({src: res.tempFilePaths[0],
        success(res){console.log('getImageInfo 回调打印的 res',res)
        }
      })
    }
  })
},

wx.previewImage()预览

previewImg:function(){
  wx.previewImage({
    current: '',
    urls: this.data.imgurl,
  })
},

保留图片到相册

saveImg:function(e){
  wx.saveImageToPhotosAlbum({
    filePath: "/images/xx.jpg",
    success(res) { 
      wx.showToast({title: '保留胜利',})
    }
  })
}
压缩图片

wx.compressImage()

上传文件
chooseFile: function () {
  let that = this
  wx.chooseMessageFile({
    count: 5,
    type: 'file',
    success(res) {console.log('上传文件的回调函数返回值',res)
    }
  })
},

上传地理位置

chooseLocation: function () {
  let that= this
  wx.chooseLocation({success: function(res) {
      const location=res
      that.setData({location})
    },
    fail:function(res){console.log("获取地位失败")
    }
  })
},
<map style="width: 100%; height: 300px;"
  latitude="{{location.latitude}}"
  longitude="{{location.longitude}}"
  show-location
></map>

下载文件

downloadFile(){
  const that = this
  wx.downloadFile({
    url: 'https://h.jpg',
    success (res) {console.log("胜利回调之后的 res 对象",res)
      if (res.statusCode === 200) {// 如果网络申请胜利
        that.setData({downloadFile:res.tempFilePath})
      }
    }
  })
},
downloadFile(){
  const downloadTask = wx.downloadFile({
    url: 'https://xxx.jpg', 
    success (res) {if (res.statusCode === 200) {
        that.setData({downloadFile:res.tempFilePath})
      }
    }
  })

  downloadTask.onProgressUpdate((res) => {console.log('下载进度', res.progress)
    console.log('曾经下载的数据长度', res.totalBytesWritten)
    console.log('预期须要下载的数据总长度', res.totalBytesExpectedToWrite)
  })
},

预览文档 wx.openDocument()

openDoc(){
  wx.downloadFile({
    url: 'https://x1.pdf', 
    success (res) {console.log("胜利回调之后的 res 对象",res)
      if (res.statusCode === 200) {
        wx.openDocument({
          filePath: res.tempFilePath,
          success: function (res) {console.log('打开文档胜利')
          },
          fail:function(err){console.log(err)
          }
        })
      }
    }
  })
},

保留文件与文件缓存 wx.saveFile

保留文件则是把图片由临时文件挪动到本地存储里

先调用 wx.downloadFile 再调用 wx.saveFile 将文件缓存的门路存储到页面的 data 对象

调用 wx.openDocument 关上这个门路

downloadPDF(){
  const that = this
  wx.downloadFile({
    url: 'https://xx.pdf', 
    success (res) {console.log("胜利回调之后的 res 对象",res)
      if (res.statusCode === 200) {
        wx.saveFile({
          tempFilePath: res.tempFilePath,
          success (res) {console.log(res)
            that.setData({savedFilePath:res.savedFilePath})

          }
        })
      }
    }
  })
},

openPDF(){
  const that = this
  wx.openDocument({
    filePath:that.data.savedFilePath,
    success: function (res) {console.log('打开文档胜利')
    },
    fail:function(err){console.log(err)
    }
  })
}
获取已保留的缓存文件列表
wx.getSavedFileList({success (res) {console.log(res.fileList)
  }
})
获取缓存文件的信息

获取临时文件的信息，应用的是wx.getFileInfo

获取缓存文件调用的信息，应用的则是wx.getSavedFileInfo

wx.getSavedFileInfo({
  filePath:"http://.pdf",// 这是缓存文件的门路
  success(res){console.log(res)
  }
})

文件管理器

wx.getFileSystemManager()来获取全局惟一的文件管理器

const fs =  wx.getFileSystemManager()

文件管理器次要治理的就是 wx.env.USER_DATA_PATH 目录里的文件

const fs =  wx.getFileSystemManager()

// 创立一个文件夹
fs.mkdir({
  dirPath:wx.env.USER_DATA_PATH+"/cloudbase",
  success(res){console.log(res)
  },
  fail(err){console.log(err)
  }            
})

// 读取文件夹下有哪些文件，会返回文件夹内文件列表
fs.readdir({
  dirPath:wx.env.USER_DATA_PATH,
  success(res){console.log(res)
  },
  fail(err){console.log(err)
  }  
})

// 新建一个文本文件 test，并往文件里写入数据
fs.writeFile({
  filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
  data:"dadaqianduan.cn",
  encoding:"utf8",
  success(res){console.log(res)
  }
})

// 新增一些内容
fs.appendFile({
  filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
  data:"dadaqianduan.cn 达达前端",
  encoding:"utf8",
  success(res){console.log(res)
  }
})

// 读取 test 文本文件里的内容
fs.readFile({
  filePath:wx.env.USER_DATA_PATH+"/cloudbase"+"/test",
  encoding:"utf-8",
  success(res){console.log(res)
  }
})
chooseImage:function() {
  const that = this
  wx.chooseImage({
    count: 1,
    success(res) {
      that.setData({tempFilePath: res.tempFilePaths[0]
      })
    }
  })
},
saveImage:function() {
  const that = this
  wx.saveFile({
    tempFilePath: this.data.tempFilePath,
    success(res) {
      that.setData({savedFilePath: res.savedFilePath})
      wx.setStorageSync('savedFilePath', res.savedFilePath)
    },
  })
},
onLoad: function (options) {
  this.setData({savedFilePath: wx.getStorageSync('savedFilePath')
  })
},
模块化与引入模块
const formatTime = date => {const year = date.getFullYear()  // 获取年
  const month = date.getMonth() + 1  // 获取月份，月份数值需加 1
  const day = date.getDate()  // 获取一月中的某一天
  const hour = date.getHours() // 获取小时
  const minute = date.getMinutes()  // 获取分钟
  const second = date.getSeconds() // 获取秒
 
  return [year, month, day].map(formatNumber).join('/') + ' ' +
   [hour, minute, second].map(formatNumber).join(':') 
}
 
const formatNumber = n => {  // 格式化数字
  n = n.toString()
  return n[1] ? n : '0' + n 
}
 
module.exports = { 
  formatTime: formatTime,
  formatNumber: formatNumber
}
const util = require('../../utils/util.js')

微信领取

绑定微信领取商户号

callPay(){
  wx.cloud.callFunction({
    name: 'pay',
    success: res => {console.log(res)
      const payment = res.result.payment
      wx.requestPayment({
        ...payment,
        success (res) {console.log('领取胜利', res) 
        },
        fail (err) {console.error('领取失败', err) 
        }
      })
    },
    fail: console.error,
  })
},

pay 云函数

const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV})

exports.main = async (event, context) => {
  const res = await cloud.cloudPay.unifiedOrder({
    "body": "zzzzz",
    "outTradeNo" : "1xxxxxxxxxx", // 不能反复，否则报错
    "spbillCreateIp" : "127.0.0.1", // 就是这个值，不要改
    "subMchId" : "xxxxxxxxxxx",  // 你的商户 ID 或子商户 ID
    "totalFee" : 100,  // 单位为分
    "envId": "xxxxxxxx",  // 你的云开发环境 ID
    "functionName": "paysuc",
    "nonceStr":"fffffffffffffff",  // 轻易弄的 32 位字符串，倡议本人生成
    "tradeType":"JSAPI"   // 默认是 JSAPI
  })
  return res
}

调用 cloudPay.queryOrder() 来查问订单的领取状态

调用 cloudPay.refund() 来对曾经领取胜利的订单发动退款

新建一个 queryorder 的云函数

const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async(event, context) => {
  const res = await cloud.cloudPay.queryOrder({
    "sub_mch_id":"xxxxxxxx",
    "out_trade_no":"xxxxxxxxx", // 商户订单号，需是云领取胜利交易的订单号
    // "transaction_id":"xxxxxxxxxxxxxxxxxxxxx",  // 微信订单号能够不用写
    "nonce_str":"xxxxxxxxxxxxxxxxxxxxxxx" // 任意的 32 位字符
  })
  return res
}
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async(event, context) => {
  const res = await cloud.cloudPay.refund({
    "sub_mch_id":"xxxxxxxxxx",
    "nonce_str":"xxxxxxxxxxxxxxxx",
    "out_trade_no":"xxxxxxxxxxxxxx",// 商户订单号，需是云领取胜利交易的订单号
    "out_refund_no":"xxxxxxxxxxxxxx",// 退款单号，能够自定义，倡议与订单号相关联
    "total_fee":100,
    "refund_fee":20,
  })
  return res
}

发订阅音讯，须要调用接口wx.requestSubscribeMessage

callPay(){
  wx.cloud.callFunction({
    name: 'pay', 
    success: res => {console.log(res)
      const payment = res.result.payment
      wx.requestPayment({
        ...payment,
        success (res) {console.log('领取胜利', res) 
          this.subscribeMessage()},
      })
    },
  })
},
subscribeMessage() {
  wx.requestSubscribeMessage({
    tmplIds: ["xxxxxx-xx-x",// 订阅音讯模板 ID],
    success(res) {console.log("订阅音讯 API 调用胜利：",res)
    },
    fail(res) {console.log("订阅音讯 API 调用失败：",res)
    }
  })
},

主动回复文本音讯和链接

<button open-type="contact" > 进入客服 </button>
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {const wxContext = cloud.getWXContext() 
  try {
    const result = await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: 'text',
      text: {content: 'xxxxxxx'}
    })
    
    const result2 = await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: 'text',
      text: {content: 'xxxxx'}
    }) 

    return event    
  } catch (err) {console.log(err)
    return err
  }
}
主动回复链接
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {const wxContext = cloud.getWXContext() 
  try {
    const result = await cloud.openapi.customerServiceMessage.send({
      touser: wxContext.OPENID,
      msgtype: 'link',
      link: {
        title: 'xxxxxxx',
        description: 'xxxxxx',
        url: 'https://xxxxxxx 依据关键词来回复用户 t.com/',
        thumbUrl: 'https://xxxxxxxm/love.png'
      }
    }) 
  return event    

  } catch (err) {console.log(err)
    return err
  }
}
依据关键词来回复用户
const cloud = require('wx-server-sdk')
cloud.init({env: cloud.DYNAMIC_CURRENT_ENV,})
exports.main = async (event, context) => {const wxContext = cloud.getWXContext() 
  const keyword = event.Content
  try {if(keyword.search(/xxxx/i)!=-1){
      const result = await cloud.openapi.customerServiceMessage.send({
        touser: wxContext.OPENID,
        msgtype: 'link',
        link: {
          title: 'xxxxx',
          description: 'xxxxx',
          url: 'https://xxx.com/',
          thumbUrl: 'https://xxxx.png'
        }
      })  
    } 
    return event
  } catch (err) {console.log(err)
    return err
  }
}

获取微信步数

getWeRunData(){
  wx.getWeRunData({success: (result) => {console.log(result)
    },
  })
}

订阅音讯

subscribeMessage() {
  wx.requestSubscribeMessage({
    tmplIds: [
      "xxxxxxxxxxxx",// 模板
      "xxxxxxxxxxxx",
      "xxxxxxxxxx
    ],
    success(res) {console.log("订阅音讯 API 调用胜利：",res)
    },
    fail(res) {console.log("订阅音讯 API 调用失败：",res)
    }
  })
},

云开发登陆

查看是否登录

<script>
    global.isLogin = function() {
        try {var openid = uni.getStorageSync('openid');
        } catch (e) { }
        if (openid === '') {return false} else {
            return {openid}
        }
    };
    export default {onLaunch: function() {console.log('App Launch')
            wx.cloud.init({traceUser: true});
        }
    }
</script>

登陆页面

<template>
    <view>
        <!-- #ifdef MP-WEIXIN -->
        <button class='bottom' type='primary' open-type="getUserInfo"
         withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
            受权登录
        </button>
        <!-- #endif -->
    </view>
</template>
<script>
    const db = wx.cloud.database();
    export default {data() {return {}
        },
        methods: {wxGetUserInfo(msg) {console.log(msg)
                
                var that = this;
                if (!msg.detail.iv) {
                    uni.showToast({
                        title: '您勾销了受权，登录失败',
                        icon: 'none'
                    });
                    return false
                }
                
                uni.showLoading({title: '加载中'});
                
                uni.login({
                    provider: 'weixin',
                    success: function(loginRes) {console.log(loginRes)
                        that.getOpenid(msg);
                    },
                    fail: function(r) {console.log(r)
                    }
                })
                
            },
            getOpenid(msg) {
                var that = this;
                
                wx.cloud.callFunction({
                    name: 'getOpenid',
                    complete: res => {console.log('openid:', res);
                        try {uni.setStorageSync('openid', res.result.openId);
                        } catch (e) { }
                        that.saveToDb(msg, res.result.openId)
                    },
                });
                
            },
            
            saveToDb(msg, openid) {console.log(openid)
                
                db.collection('user').where({_openid: openid}).get().then(res => {console.log(res)
                    
                    if (res.errMsg === 'collection.get:ok') {if (res.data.length === 0) {db.collection('user').add({
                                data: {
                                    ...msg.detail.userInfo,
                                    _openid: res.result.openId
                                }
                            }).then(res => {console.log(res);
                            });
                        }
                        
                        uni.hideLoading();
                        
                        uni.showToast({
                            title: '受权胜利',
                            icon: 'success'
                        });
                        
                        setTimeout(() => {uni.navigateBack();
                        }, 1500);
                    } else {}})

            }
        },
        onLoad() {}
    }
</script>

总结

以上就是明天要讲的内容，本文仅仅简略介绍了小程序开发 - 云开发技术总结，感激浏览，如果你感觉这篇文章对你有帮忙的话，也欢送把它分享给更多的敌人。感激转发分享，点赞，珍藏哦！

正文完
前端
发表至： 前端
2020-12-18
 0
关于前端:Fabricjs-变换视窗
关于前端:这7个-Vue-模式可能你经常用但现在看对你很有帮助
关于前端:关于考研题库小程序如何获取激活码进行解锁题库的几种方式探索与实践
关于前端:面试题-考察宏任务promise