微信小程序从云开发到上线

最新推荐文章于 2024-05-02 20:38:09 发布

Palate

最新推荐文章于 2024-05-02 20:38:09 发布

阅读量1k

点赞数

分类专栏：微信云开发文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_51670675/article/details/119881348

版权

微信云开发专栏收录该内容

2 篇文章

订阅专栏

文章目录

一、创建项目
二、云函数
三、静默登录
四、获取用户信息
五、使用缓存
六、同页面数据操作
七、不同页面数据传递
八、页面跳转
九、检查版本更新
十、上线

前段时间自己做了一个云开发微信小程序，发现并不复杂，有前端基础的可以试一下。这里主要简单说明一下开发过程，更多内容可以在其他地方查看资料。

微信开放文档 (qq.com)

一、创建项目

1.使用微信小程序新建项目

（1）小程序注册，获取AppID

点击该链接，注册完成后，登录后点击“开发”，“开发设置”，找到”开发者ID“里面”AppID“

小程序 (qq.com)

（2）开发者工具

打开开发者工具，扫码登录后，点击新建项目，修改项目信息。主要填入自己的AppID和选择云开发。

可以不用一开始就选择云开发，后面可以再修改。

下载地址稳定版 Stable Build | 微信开放文档 (qq.com)

2.配置环境id

app.js文件中将env环境替换为自己的环境id，点击微信开发工具的“云开发”，再点击“设置”，可以查看。

3.添加tabBar

在app.json文件中添加 tabBar

"tabBar": {
    "list": [{
        "pagePath": "pages/index/index", // 页面路径
        "iconPath": "image/binggan.png", // 图标路径
        "selectedIconPath": "image/binggan-active.png", // 选中后图标路径
        "text": "首页" // 文字
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "image/danhuang.png",
        "selectedIconPath": "image/danhuang-active.png",
        "text": "日志"
      }
    ]},

二、云函数

1.云函数

（1）新建：右击cloudFunctions点击新建node.js云函数

（2）初始化：在JS文件中，在cloud.init()中的增加环境id

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

（3）更新：右击JS文件，点击“云函数增量上传：更新文件”

（4）编写：内容较多，可查看微信官方的开发文档

注意：在云函数中使用event.XX获取页面传递过来的值，XX为传递的值；

云函数访问数据库参考：

exports.main = async(event, context) => {
    let openid = event.openid
    let pagenum = event.pagenum
    return await db.collection(’todo‘).where({
        openid: openid,
        show: true
    }).field({
        completed: true,
        title: true
    }).orderBy('startTime', 'desc').skip(pagenum).limit(8).get()
}

这是一个获取数据的请求，包括数据范围，选择返回的数据、时间排序、限制条数、跳过条数

2.访问云函数

可以参考下面静默登录中的写法。

三、静默登录

1.云函数

微信小程序可以直接获取用户的openid和其他身份标识，这里只获取openid。先完成云函数的新建和初始化，在云函数入口函数添加下面代码。

  try {
    const wxContext = cloud.getWXContext()
    return {
      openid: wxContext.OPENID,
    }
  } catch (e) {
    console.log(e)
  }

2.首页的JS文件

getOpenid() {
    // session_key 已经失效，需要重新执行登录流程
    wx.cloud.callFunction({
      name: 'login',
      complete: res => {
        app.globalData.openid = res.result.openid
        this.setData({
          openid: res.result.openid
        })
        this.getData()
      }
    })
  },

四、获取用户信息

微信小程序经过修改，现在推荐用getUserProfile，可以使用点击的形式触发该函数，函数触发会询问用户是否同意，用户同意后即可获得用户信息，得到的是基本的用户信息，更多的用户信息获取可以查看开发文档。

getUserProfile() {
      // 推荐使用wx.getUserProfile获取用户信息
    wx.getUserProfile({
      desc: '展示用户信息',
      // 获取openid
      success: (res) => {
        this.setData({
          userInfo: res.userInfo, // res.userInfo为返回的用户信息
        })
      }
    })
  }

五、使用缓存

关于缓存，个人推荐使用带Sync的同步版本，异步版本容易出错

1.缓存信息

try {
	wx.setStorageSync('userInfo', data)
} catch (e) {}

2.获取缓存

  getStorage() {
    try {
      var userInfo = wx.getStorageSync('userInfo')
      // 判断缓存是否存在
      if (userInfo) {
      // 存在，获取缓存
        this.setData({
          openid: userInfo.openid
        })
      }
      // 保存用户信息到app.globalData中
      app.globalData.userInfo = userInfo
    } catch (e) {}
  },

六、同页面数据操作

1.JS文件中的数据传递

同一JS文件中，数据通过page({})里面的data来保存，以userInfo为例

 data: {
    userInfo: {}
  }

获取：

userInfo = this.data.userInfo

修改：

this.setData({
	userInfo: res.data
})

2.html页面与JS的数据传递

（1）JS文件中data的数据改变后，会自动反应到wxml文件，即在页面中展示出来

（2）html在中数据获取，以点击事件获取id为例

wxml组件的button中设置点击事件，同时设置自定义data-id 属性：

catchtap = "delData" data-id="{{item._id}}

js文件中：

id = e.target.dataset.id

通过id来找到对应数据，修改JS中的数据来实现页面变化

（3）表单

多个数据获取，需要使用表单，具体查看开发文档。

七、不同页面数据传递

1.在app.js文件的APP({})里面插入globalData，以userInfo为例

 globalData: {
    userInfo: null
  }

2.获取和修改

（1）先在该页面的JS文件的page({})前面添加

const app = getApp()

（2）获取：

userInfo = app.globalData.userInfo

（3）修改：

app.globalData.userInfo = userInfo

八、页面跳转

1.wx.navigateTo

跳转到非tab页面，可以传递和接收数据，以下为简单的跳转，实现跳转和传递一个数据。

wx.navigateTo({
      url: '../editText/index', // 页面相对路径
      events: {},
      success: (res) => {
        res.eventChannel.emit('acceptDataFromOpenerPage', data)
      }
    })

2.wx.reLaunch

关闭了内存中所有保留的页面，再跳转到目标页面，路径后面接参数。注意：已打开过的页面会重新加载。

wx.reLaunch({
	url: '../idea/index?id=1'
})

3.wx.switchTab

跳转到tab页面，已打开过的页面不会重新加载，相当于重新展示页面，数据可以通过app.globalData传递，在onShow钩子函数中定义相关逻辑。

wx.switchTab({
	url: '../idea/index'
})

注意：做页面跳转的时候，需要注意不同的API对跳转的页面类型有限制。这里只说明基本使用，更多说明和其他跳转API可以查看开发文档。

九、检查版本更新

在app.js文件中增加函数

 getUpdate() {
    if (wx.canIUse('getUpdateManager')) {
      const updateManager = wx.getUpdateManager()
      updateManager.onCheckForUpdate(function(res) {
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          updateManager.onUpdateReady(function() {
            wx.showModal({
              title: '更新提示',
              content: '新版本已经准备好，是否重启应用？',
              success: function(res) {
                // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
                if (res.confirm) {
                  // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                  updateManager.applyUpdate()
                }
              }
            })
          })
          updateManager.onUpdateFailed(function() {
            // 新的版本下载失败
            wx.showModal({
              title: '已经有新版本了哟~',
              content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
            })
          })
        }
      })
    }
  },