步入大三,和几个小伙伴用三周时间一起制作了一个小程序。
我们刚开始尝试了微信JS前端+JAVA后台的方法,但是由于缺少前端后台传数据的知识,最终选择了云开发的方式。
以下记录我们的一些关键步骤和突破的难点。希望能给和我们一样自学入门的同学们提供一些参考,略有不同,还请指教
关于申请账号,很简单,网上教程也很多,随便贴一条链接
https://www.360kuai.com/pc/9fab8fca874e5f47b?cota=4&kuai_so=1&tj_url=xz&sign=360_57c3bbd1&refer_scene=so_1
关于下载开发者工具,进入微信公众平台,
点击“普通小程序开发者工具”
点击’开发者工具‘
选择稳定版下载再安装就OK了
js就是微信小程序前端(也就是制作界面)使用的一种语言,我们在网上搜了一些视频教程,也看了一些书来入门。
以下是我用过的学习资料
书籍:《微信小程序开发入门及案例详解》机械工业出版社
B站: https://b23.tv/av64545363/p1 石头哥,以及一些其它的教程。
还搜罗了一些关于商城小程序的模板。
制作登陆并编辑个人的功能时发现,如果不做限制,会出现同一个账号多次登陆,云数据库user集合出现多条记录的结果,但我们希望数据库里每个账户对应一条记录。
所以,当我们插入数据时要注意,在app.js里把openid设置成全局变量。
//app.js
App({
globalData: {
user:[],
openid:'',
msgList:[],
isLogin: false, //aaa:''
},
onLaunch: function () {
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
traceUser: true,
}) } }})
在其它文件里全局变量这样调用:
app.globalData.openid
写在前面,值得注意的是,所以涉及数据库的操作的.js中都要写以下三句代码,很多次错误都是由于忘了写这个,下面有关数据库贴的代码也要在当前页面.js里加上这几句:
var app = getApp()
const db = wx.cloud.database({});
const cont = db.collection('orders');
//函数所在当前页.js
db.collection('orders').doc(e.currentTarget.dataset.id).update({
// data 传入需要局部更新的数据
data: {
state: "已完成"
} })
//函数所在页面.js
db.collection('user').where({
_openid: app.globalData.openid
}).get({
success: res => {
this.setData({
user: res.data,
hasUserInfo: true,
username: res.uname,
loginMessage: '',
avatarUrl: res.data[0].imgUrl,
editMessage: '编辑个人信息'
}) } })
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
try {
const wxContext = cloud.getWXContext()
return await db.collection('user').where({
_openid: wxContext.OPENID
}).update({
// data 传入需要局部更新的数据
data: {
uname: event.uname,
sid: event.student_id,
address: event.address,
phone_number: event.phone,
} }) } catch (e) { console.error(e) }}
编辑云函数后要记得右键,上传并部署云函数!
在调用云函数的函数里这么写:
var that = this;
wx.cloud.callFunction({
// 云函数名称
name: 'updateInfo',
// 传给云函数的参数
data: {
uname: that.data.uname,
student_id: that.data.sid,
address: that.data.address,
phone: that.data.phone_number,
}
})
以上代码的实现过程大概是这样的:
就这样,所有云数据库的增删查改基本都可以用以上三种方式之一实现(增:add;改:update;查:get;删:remove),实现过程要注意以上标粗的子句,漏掉后可能出现错误;出现错误也可以检查以下,是不是漏掉了哪一个步骤。
比如,我们需要点击某个商品进入它的详情页,但我们不可能为每一个商品都写一个详情页。所以需要这样实现的:点击某个商品时,系统记住商品的id,跳转到公共的详情页,根据记住的商品id,渲染出相应商品的信息。这就涉及到了不同页面之间的传参。
下面是有关带参跳转的代码。
//前一页.wxml
查看详情
//前一页.js
viewItem: function (event) {
var id = event.currentTarget.dataset.id;
wx.navigateTo({
url: '../detail/detail?id=' + id
});
}
//后一页.js
onLoad: function(options) {
db.collection('goods').doc(options.id).get({
success: res => {
this.setData({
good: res.data
}) } }) },
就这样实现了带参跳转。