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

步入大三，和几个小伙伴用三周时间一起制作了一个小程序。
我们刚开始尝试了微信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(javascript)语法

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');

增删查改有几种方法，第一种方法在增删查改中都起作用，但比较局限，doc（）括号中只能是集合记录中的第一条字段。
以下代码以更新为例，把数据库中名为orders的集合中，第一条字段值等于‘e.currentTarget.dataset.id’的记录中，state字段改为"已完成"。

//函数所在当前页.js
db.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。

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

后一页接收参数。
options.id为接收到的参数。

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

就这样实现了带参跳转。

云开发制作二手商城微信小程序相关推荐

云开发校园微社区微信小程序源码/二手交易/兼职交友微信小程序开源功能介绍
简介: 云开发校园微社区微信小程序开源源码,这是一款云开发校园微社区-二手交易_兼职_交友_项目微信小程序开源源码,可以给你提供快捷方便的校园生活,有很多有趣实用的板块和功能,如:闲置交易.表白交友. ...
云开发校园微社区微信小程序源码/二手交易/兼职交友微信小程序开源源码
介绍: 云开发校园微社区微信小程序开源源码,这是一款云开发校园微社区-二手交易_兼职_交友_项目微信小程序开源源码,可以给你提供快捷方便的校园生活,有很多有趣实用的板块和功能,如:闲置交易.表白交友. ...
小程序云开发_借助小程序云开发制作校园导览小程序丨实战
导语偌大校园,寻路犯难.没关系!本文教你借助云开发制作精美校园导览小程序,带你走遍校园的每个角落,发现不一样的风景. 背景刚入学的新生要想不迷失在偌大的校园,除了依靠不怎么可靠的路边标识外,总会收 ...
springboot 做表白墙_基于微信云开发 SayLove 表白墙微信小程序V1.0
基于微信云开发 SayLove 表白墙微信小程序后续会继续更新,敬请期待2.0全新版本~ 欢迎添加左边的微信一起探讨! 注意: 云函数的wx-server-sdk依赖需要更新才能正常使用,这里的都是 ...
借助小程序·云开发制作校园导览小程序丨实战
背景当你刚上大学的时候,要想不迷失校园,除了依靠不怎么可靠的路边标识外,总会收到那么一张卡通绘制的校园地图: 这种静态图片可以让我们快速地了解到所需的地理位置信息,但使用和思考过后,会发现以下问题: ...
云开发周公解梦微信小程序源码/支持流量主功能
☑️ 编号:ym399 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:1.45MB ☑️ 类型:云开发周公解梦 ☑️ 支持:微信小程序
云开发版高效学习微信小程序源码包含复习资料学习共享护眼精灵等功能
☑️ 编号:X0016 ☑️ 品牌:暂无 ☑️ 语言:微信小程序 ☑️ 数据库:无需数据库 ☑️ 类型:微信小程序 ☑️ 规格:小程序 ※ 欢迎关注私信(发消息不限制),领取福利 ※ ☑️ 源码介绍: ...
云开发多功能工具箱微信小程序源码/带流量主微信小程序源码
☑️ 编号:ym398 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:2MB ☑️ 类型:云开发多功能工具箱 ☑️ 支持:微信小程序
最新云开发王者荣耀查询微信小程序源码王者查询源码带流量主
☑️ 编号:ym338 ☑️ 品牌:无 ☑️ 语言:php ☑️ 大小:570KB ☑️ 类型:王者荣耀查询 ☑️ 支持:微信小程序

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