小程序云开发初始化

首次创建，可以删除所有无用文件
cloudfunctions目录是存放所有云函数，可以全部清空
miniprogram目录是小程序本地文件目录，可以只保留配置文件，其它的目录都清空（目录要存在）
app.json是小程序的根配置文件，全局配置，比如pages，tabBar等
在app.json里pages里面，新增一行"pages/home/home"，保存的话会会在pages目录自动生成home目录，并生成home文件
每个页面，都有各自的配置文件，可以单独配置各自页面

安装vant小程序ui
在miniprogram目录右击，选择在终端打开
npm init -y初始化一个package.json文件
然后安装vant包 npm i @vant/weapp -S --production
微信开发者工具，点击 工具 -> 构建 npm
右侧详情，本地设置，勾选使用npm模块，不校验合法域名等
将 app.json 中的 "style": "v2" 去除
在app.json中，全局按需引入组件
"usingComponents": {
"van-button": "@vant/weapp/button"
}
以后引入各个组件时，需要仿照上面把多余路径去掉即可使用

{
  "pages": [
    "pages/home/home",
    "pages/form/form",
    "pages/shop/shop",
    "pages/my/my"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "在济源",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "van-button": "@vant/weapp/button"
  },
  "tabBar": {
    "color": "#909399",
    "selectedColor": "#409EFF",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "public/imgs/tabar/home.png",
        "selectedIconPath": "public/imgs/tabar/home-a.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/form/form",
        "text": "提交",
        "iconPath": "public/imgs/tabar/list.png",
        "selectedIconPath": "public/imgs/tabar/list-a.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "商城",
        "iconPath": "public/imgs/tabar/shop.png",
        "selectedIconPath": "public/imgs/tabar/shop-a.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "public/imgs/tabar/my.png",
        "selectedIconPath": "public/imgs/tabar/my-a.png"
      }
    ]
  }
}
初始化项目配置如上

云开发，首次需要填写资料开通
开通后，可以使用里面的数据库，文件存储，云函数
在app.js里配置环境变量，云开发-设置-环境设置-环境id，写入app.js里wx.cloud.init里的env

点击按钮，获取用户授权，获取用户基本信息
<van-button type="primary"  bindgetuserinfo="getuserinfo" open-type="getUserInfo">获取用户基本信息</van-button>
新建一个云函数，取名getUserOpenId，获取这个人的openId
在顶部的cloudfunctions上右击新建node.js云函数，取名getUserOpenId
在index.js里面，编辑业务代码，直接返回用户信息
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
  const {OPENID} = cloud.getWXContext()
  return {
    OPENID
  }
}
上传并部署到云端，然后在js的getuserinfo方法里面，调用云函数
 async getuserinfo(e){
    let {result} = await wx.cloud.callFunction({
      name:"getUserOpenId"
    });
    //查询用户表数据库，获取所有数据
    let {data} = await usersCOL.where({}).get()
    //从数据库中判断，有没有获取到的OpenId，如果有放弃，如果没有存入数据库；
    let temp = data.some(item => {
      return item._openid == result.OPENID
    });
    if (temp) return;

    //把数据存入数据库
    await usersCOL.add({
      data: e.detail.userInfo
    });

    //渲染数据
    this.setData({
      userInfo: e.detail.userInfo
    });
    console.log(this.data.userInfo);
  },