300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 云开发制作二手商城微信小程序

云开发制作二手商城微信小程序

时间:2018-08-22 04:34:50

相关推荐

云开发制作二手商城微信小程序

从零到有云开发制作二手商城微信小程序

步入大三,和几个小伙伴用三周时间一起制作了一个小程序。

我们刚开始尝试了微信JS前端+JAVA后台的方法,但是由于缺少前端后台传数据的知识,最终选择了云开发的方式。

以下记录我们的一些关键步骤和突破的难点。希望能给和我们一样自学入门的同学们提供一些参考,略有不同,还请指教

一、入门

申请小程序账号并下载开发者工具

关于申请账号,很简单,网上教程也很多,随便贴一条链接

/pc/9fab8fca874e5f47b?cota=4&kuai_so=1&tj_url=xz&sign=360_57c3bbd1&refer_scene=so_1

关于下载开发者工具,进入微信公众平台,

点击“普通小程序开发者工具”

点击’开发者工具‘

选择稳定版下载再安装就OK了

学习一些简单的js(javascript)语法

js就是微信小程序前端(也就是制作界面)使用的一种语言,我们在网上搜了一些视频教程,也看了一些书来入门。

以下是我用过的学习资料

书籍:《微信小程序开发入门及案例详解》机械工业出版社

B站: https://b23.tv/av64545363/p1 石头哥,以及一些其它的教程。

还搜罗了一些关于商城小程序的模板。

二、制作过程的一些要点和窍门

全局变量解决云数据库冗余记录问题

制作登陆并编辑个人的功能时发现,如果不做限制,会出现同一个账号多次登陆,云数据库user集合出现多条记录的结果,但我们希望数据库里每个账户对应一条记录。

所以,当我们插入数据时要注意,在app.js里把openid设置成全局变量。

//app.jsApp({ 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');

增删查改有几种方法,第一种方法在增删查改中都起作用,但比较局限,doc()括号中只能是集合记录中的第一条字段。

以下代码以更新为例,把数据库中名为orders的集合中,第一条字段值等于‘e.currentTarget.dataset.id’的记录中,state字段改为"已完成"。

//函数所在当前页.jsdb.collection('orders').doc(e.currentTarget.dataset.id).update({// data 传入需要局部更新的数据data: { state: "已完成"} })

第二种方式使用where查询,where里为查询的限制条件,但只在插入和查询时起作用,在删改时不起作用。至于在删改时怎么办,请往下看下面一条。

以下代码以插入为例,查询数据库中名为user的集合中,在字段_openid(这次这个字段不必是第一个,可以是任一个)等于app.globalData.openid的记录中,插入user,hasUserInfo,username等字段。

//函数所在页面.jsdb.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: '编辑个人信息' }) }})

如果在删改数据库时,依据不是记录的第一条字段,以上两种方法就都不起作用了,于是我们可以使用云函数了。在云函数中,可以使用where删改。

以更改数据库为例。首先创建并上传云函数updateInfo。右键cloudfunctions,新建Node.js云函数。

给云函数命名,并上传云函数

修改云函数的index.js。

// 云函数入口文件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,}})

以上代码的实现过程大概是这样的:

本地调用名为’updateInfo’的云函数本地把uname,student_id,address,phone四个参数赋值后给云函数云函数where语句查询到_openid符合条件的记录云函数接收本地传的参数,并更改云数据库中记录uname,sid,address,phone_number四条字段的值为接收的参数。

就这样,所有云数据库的增删查改基本都可以用以上三种方式之一实现(增:add;改:update;查:get;删:remove),实现过程要注意以上标粗的子句,漏掉后可能出现错误;出现错误也可以检查以下,是不是漏掉了哪一个步骤。

带参跳转实现不同页面间的传参和关联

比如,我们需要点击某个商品进入它的详情页,但我们不可能为每一个商品都写一个详情页。所以需要这样实现的:点击某个商品时,系统记住商品的id,跳转到公共的详情页,根据记住的商品id,渲染出相应商品的信息。这就涉及到了不同页面之间的传参。

下面是有关带参跳转的代码。

前一页.wxml传参给前一页.js。

在前一页面的.wxml里‘查看详情’按钮绑上要带过去的参数,即。格式为data-接收参数名="{{item.本地参数名}}”。

//前一页.wxml<van-button data-id="{{item._id}}" size="small" type="primary"plain bind:click="viewItem">查看详情</van-button>

前一页.js接收参数并传参给下一页

event.currentTarget.dataset.id为穿过来的参数

url: ‘…/detail/detail?id=’ + id 的意思是跳转到detail页面且带过去一个参数id。

//前一页.jsviewItem: function (event) { var id = event.currentTarget.dataset.id; wx.navigateTo({url: '../detail/detail?id=' + id }); }

后一页接收参数。

options.id为接收到的参数。

//后一页.jsonLoad: function(options) { db.collection('goods').doc(options.id).get({success: res => { this.setData({good: res.data })} }) },

就这样实现了带参跳转。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。