微信小程序 简单功能实现

微信小程序 简单功能实现

微信小程序官方开发文档: 微信开发文档

一、获取用户授权

1、点击登录按钮,弹出授权弹窗

具体实现:
首先在button上绑定一个函数,注意,需要同时绑定open-type属性值为"getUserInfo",否则无法调起弹窗;如下图。

<button class="btn-login" wx:if="{{!hasUserInfo && canIUse}}" bindgetuserinfo="getUserInfo" open-type="getUserInfo">登录</button>

然后,在对应page页面的js文件下实现getUserInfo方法,通过点击事件,调取小程序封装好的弹窗,点击允许后,赋值给小程序全局对象上的用户信息,代码如下图。

getUserInfo: function(e) {
    app.globalData.userInfo = e.detail.userInfo
  },

二、使用云函数获取数据库信息

首先点击小程序开发工具上的云开发,创建云开发环境.然后再小程序项目的project.config.json文件中插入以下代码:

"cloudfunctionRoot": "cloud/",

之后,可以在项目文件夹下新建一个cloud文件,创建完成后会自动绑定当前的云函数环境,之后可在此文件夹下新建node.js云函数 getClassify ,代码如下:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env:"demo-dy06i"
})

// 云函数入口函数
exports.main = async (event, context) => {
  console.log(666)
  return cloud.database().collection("cookhouse_classify").get()
}

之后,进入app.js文件中,在onLaunch函数下插入一行代码,调用云函数处事方法init,代码如下:

wx.cloud.init()

方便之后每次调用云函数时不用初始化,如果不写在app.js中,则每次调用云函数则需要在对应的page页面下的js文件中重复编写以上代码。
初始化之后,可使用”wx.cloud.callFunction“代码调用对应云函数

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // wx.cloud.init()
    wx.cloud.callFunction({
      name: "需要调用的云函数名"
    }).then(res => {
      // console.log(res.result.data)
      this.setData({
        classifications:res.result.data
      })
    })
  },

三、引用第三方ui组件库

1、以 vantweapp 为例，首先通过命令行进入项目文件夹所在路径下，执行

#  通过npm或cnpm安装
cnpm i @vant/weapp -S --production

安装vantweapp

2、打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

3、使用组件
在 app.json 中去除 “style”: “v2” 小程序给新版基础组件强行加上了许多样式，难以去除，不关闭将造成样式混乱。