微信小程序开发记录

说明：笔者刚毕业一年，第一次比较认真的去了解一个项目，碰到了很多问题，在此记录一下。

登录注册

功能涉及到后端服务器的用户数据，并且使用了小程序的云开发。

登录流程：
首先进入loading加载界面，判断用户是否授权
若已授权，调用云函数获取用户openid，通过该openid在数据库中查找绑定的账号及密码，若存在，直接登录到用户信息界面。
若未授权，弹出授权界面，允许之后选择新or老用户，选择新用户之后自动注册进入用户信息界面，老用户则跳到登录界面，输入账号密码进行登录。

第一次跟项目，没有很好的大局观，很多东西不知道该放到哪里好，应该在哪里判断。之后要先想清楚代码写在哪里，有了大概的规划，然后再进行功能的开发。

云储存

首先配置好云开发的功能，然后在云开发的数据库中新建一个集合。
然后在使用数据库的js文件中，初始化数据库
const db = wx.cloud.database();
1.在数据库中插入数据：

db.collection('test').add({
      data: {
        test: "插入数据"  
      },
      success: res => {
        console.log("插入成功");
      }
    })

2.在数据库中查询数据：

db.collection("test").get({
     success:function(res){
       console.log(res.data)
       //处理数据
     }
   })

云函数

第一次使用，内心觉得自己没碰到过的就不太懂，不敢下手，后来发现和js里的方法一致，不过在云函数里处理就不涉及前端的内容，云函数处理好之后返回给前端就可以。

有了云环境之后，就可以添加云函数，在云函数上获取用户openid，手机号等其他内容就比较便捷，有微信专门封装好的接口，获取好前置的权限要求，调用一下就可以获得了，非常方便。

例：

exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID
  }
} 

处理数据库的数据等操作都应该放到云函数里处理。

具体详细操作可点击查看 微信小程序云开发云函数

全局数据

首先在app.js里面设置好全局数据

globalData: {
  userInfo: null
  }

然后在想要调用的页面最上面先引入

const app = getApp()

然后就可以调用,进行调用或者改变了

//调用
var userInfo = app.globalData.userInfo 

//改变
app.globalData.userInfo =  wx.getStorageSync("userInfo");

生命周期

关于生命周期，有些没有用到，但是感觉之后会有用，在此记录一下

1.应用生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
后台： 点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

2.页面生命周期

js文件中定义了一些页面生命周期函数，下面简述下这些生命周期函数的方法作用
（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发
官方介绍 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

3.应用与页面生命周期触发顺序

（1）首次进入小程序会先触发应用生命周期中onLaunch方法和onShow方法，其次触发页面生命周期中onLoad、onShow和onReady方法。
（2）前台切换到后台时，先触发页面生命周期中onHide方法，再触发应用生命周期的onHide方法。
（3）后台切换到前台时，先触发应用生命周期中onShow方法，再触发页面生命周期的onShow方法。

tabbar

微信推荐方式：

点开项目中的app.json，添加下面这段

15   "tabBar": {  
16    "color": "#a9b7b7",  
17    "selectedColor": "#11cd6e",  
18    "borderStyle": "black" ,
19    "list": [{  
20      "selectedIconPath": "images/icon_consult_press.png",  
21      "iconPath": "images/icon_consult.png",  
22      "pagePath": "pages/index/index",  
23      "text": "首页"  
24    }, {  
30      "selectedIconPath": "images/icon_mine_press.png",  
31      "iconPath": "images/icon_mine.png",  
32      "pagePath": "pages/mine/mine",  
33      "text": "我的"  
34    }
35    ]  
36  } 

说明：

tabBar 指底部的 导航配置属性

color 未选择时 底部导航文字的颜色

selectedColor 选择时 底部导航文字的颜色

borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list 导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text 导航图标下方文字

color-ui

先在github上下载一下color-ui的项目，然后下载源码解压获得/demo，复制目录下的 /colorui 文件夹到你的项目中
然后在App.wxss中引入关键Css main.wxss 和icon.wxss

@import "colorui/main.wxss";
@import "colorui/icon.wxss";

然后用微信开发者工具打开color-ui的小程序项目，就可以去参考使用了。

静态数据

这块主要是记录一下自己的方向走歪了，正常流程应该是先画html和css，画好之后用静态数据填充了然后再写功能。 自己第一次做，就比较着急，然后在网上乱搜功能，乱copy代码，最后虽然功能和页面都实现了，但是花费了很大精力去调试优化。得不偿失。以后还是要按步骤一步一步来。

静态数据填充这块之前发现了一个很好用的mock.js，等这个项目结束了可以去跑一下试着用一用。

mock.js

数据结构

js常用数据结构： Array, Object
结构型数据： JSON
特殊结构： Function

Array 数组，列表

Object

我们常说的对象，字典，键值对。

其他详细说明介绍

JavaScript常用数据结构

echarts

Echarts全解注释

moment

处理日期格式的库
http://momentjs.cn/docs/

同步和异步

同步异步概念

"同步模式"就是与任务的排列顺序是一致的、同步的，按照任务的排列进行一个一个的执行；"异步模式"则正好相反，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，程序的执行顺序与任务的排列顺序是不一致的，因此是异步的。

关于异步async

async 用来指定方法为异步方法（区别于同步方法），await 表示紧跟在后面的表达式需要等待结果。
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句
await 命令只能用在 async 函数之中，如果用在普通函数，就会报错。

其他

1、利用正则表达式验证邮箱

let str = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/ //正则表达式
    if (str.test(email)) { //检查正则表达式是否符合邮箱地址要求
      return true
    } else {
      wx.showToast({ //显示消息提示框
        title: '邮箱格式错误',
        icon: 'loading'
      })

2、在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

正则表达式