微信小程序云开发从头到尾详细全过程教程! |
您所在的位置:网站首页 › 微信小程序开发具体步骤 › 微信小程序云开发从头到尾详细全过程教程! |
hello,大家好,我是disguiseFish!我最近在搞云开发呀,然后决定把自己从头到尾的每一步都分享出来,供大家一起学习进步。 第一步:创建一个小程序号 第二步:完善基础信息后,添加开发者 第三步:我们开发者开始开发小程序~ (一)创建一个我们的云开发项目我们先打开微信小程序开发者工具 在我们的 mp.weixin.qq.com/ 网站上找到我们小程序的appID 将这个id填入到里面,并且勾选云开发,点击新建 首先笔者认为,自己如果还不太熟悉云开发的话,建议首页先保留着,里面有一些基础的教程,可以自己尝试体验学习一下
开发步骤我这边是打算,先写前端静态页面,之后再新建云函数~~接着再联调 在这里我选择使用vant框架,其实用什么框架最后效果都差不多,正好笔者之前没用过vant,想试试看。 1.查看组件库样式vant-weapp组件库链接:youzan.github.io/vant-weapp/… 2.初始化package.json文件打开终端
引进成功后我们勾选一下使用npm模块 这个时候我们可以切到ui框架weapp组件库链接:youzan.github.io/vant-weapp/… 找到我们要用的组件,例如我现在要使用该框架的tab标签:
最后能成功引用 接下来想实现:创建一个新页面,首页还留着,加一个按钮,点击它跳到新增的页面(我们的第一个页面) 先右键点击pages,新建文件夹,在新的文件夹里,可以先把index文件夹里的文件们copy过来,再把不用的删掉 当然你也可以在pages下新建文件夹,再右键该文件夹点击新建page,接下来你就能拥有干净的文件了,这种添加方式会自动在路由里给你添加上路由,你就不用手动添加了 然后我们再配置路由,接下来在首页中新增按钮跳转到我们真正的首页去(选择暂时保留首页,为了之后学习创建云函数) 接下来在真正的首页中创建了三个按钮,这个页面比较简单,这个项目之后会涉及到鉴权,之后我总结的时候会分开写让逻辑清晰一些 再分别创建这三个按钮跳转到的页面
今天我就先写到这,之后会一点点更新,把自己接下来遇到的问题和解决方法贴出来~ 接下来我要写我的第二个页面了,订单列表,订单列表就打算上部分写一个tabs,下部分可以做一个列表 我在引入vant的一个组件的时候,遇到一个问题,和其他引入组件的提示不一样了,感觉是他们的一个问题吧 就是会提示
最后研究了一会儿后发现,重启后样式就正常了。。。。。。然后继续敲代码
这样引入之后,就能正常显示我们要的效果辣~ 然后现在我写到一个分享按钮的功能,然后我分享给小伙伴,小伙伴那边因为不是开发者无法点开查看,他提议让我把代码开放到体验版,,,然后 我目前还不知道怎么弄 ,接下来一步步来 然后,,,,其实很简单,因为这个项目一开始是在本地上启动的一个,我直接在微信开发者工具上
在项目的project.config.json文件中,将"cloudfunctionRoot": 字段的值设置为你的云函数根目录,如"cloudfunctionRoot": "云函数根目录"样式,如下图所示
env字段即为云开发的环境ID,然后在云函数根目录右键之后选择云环境为下图env变量设置的云环境。至此云开发的云函数环境已经搭建好了。不过我这里是没填,表示的是使用默认环境 右键cloudfunctions文件,点击新建node.js云函数,然后给你的这个方法起一个符合业务的名字,因为我这里想做一个用户一进入小程序,便要查询该用户的身份是管理人员还是负责人,或是路人~~ 所以起的这个名字:获取权限 在新建的云函数处右键在终端打开,然后输入npm install node-xlsx该命令为使用node.js的npm管理工具安装依赖模块,安装完成之后会在新建的云函数目录下生成一个node_modules和package-lock.json的文件,至此云函数依赖安装完成。 云函数的业务逻辑都是在云函数的入口出开始编写 最初是这样的: 云函数的传入参数有两个,一个是 event 对象,一个是 context 对象。event 指的是触发云函数的事件,当小程序端调用云函数时,event 就是小程序端调用云函数时传入的参数,外加后端自动注入的小程序用户的 openid 和小程序的 appid。context 对象包含了此处调用的调用信息和运行状态,可以用它来了解服务运行的情况。在模板中也默认 require 了 wx-server-sdk,这是一个帮助我们在云函数中操作数据库、存储以及调用其他云函数的微信提供的库 我们可以试一下:我们修改一下模板的返回值, // ... exports.main = async (event, context) => { // ... return { sum: event.a + event.b } }这几行代码代表的是,将传入的 a 和 b 相加并作为 sum 字段返回给调用端。 在小程序中调用这个云函数前,我们还需要先将该云函数部署到云端。在云函数目录上右键,在右键菜单中,我们可以将云函数整体打包上传并部署到线上环境中。 本地调试的方法 1 编写如下云函数代码然后我们本地调试一下,先对该云函数 右键打开终端 npm install 一下,接着右键该函数开启本地调试 3 此时应该看到本地调试窗口打开,同时该云函数的 tab 也已打开,如果没有,在左侧列表中选择该函数,双击打开 tab 4 如果右侧的控制面板中的 “开启本地调试” 没有勾选,勾选上,勾选后会开启对该云函数的本地调试,所有模拟器中的请求会请求到本地调试的云函数实例
一开始我按着官方给的教程编写,,,不知道为啥就是有问题 提示了已经调用该函数 但就是没有返回值。。后来我删掉后重新新建云函数后,就能正常编写返回了。。。一样的代码。。。就很神奇 然后我在数据库中写入一些东西,这里尝试写json传入失败,包括拿导出的json上传数据还是失败,应该是他们这个功能有问题吧 然后我还是手动敲入了4条数据
首先数据库是这样的:
在首页调用该方法 入参传入该用户的openId 成功拿到了我们要的数据,通过用户列表的type再去判断页面某个部件的展示和隐藏 在创建新增按钮里添加一个事件,在事件方法中直接写 还是很简单的 其实 不调用函数 其他地方想直接操作数据库 直接这样写 似乎也是可以的! 但是考虑到方法的复用,所以还是写在了数据库里,然后去数据库查,新增成功啦! (三)云开发如何操作数据库,删除数据库中的数据呢?这里有文档: uniapp.dcloud.io/uniCloud/cf… // db.collection('users_list').doc(_id).remove({ // success: function(res) { // // console.log(res,'res') // wx.showToast({ // title: '删除负责人成功', // }) // } // })在写云开发的删除的时候,我掉入了一个坑里,我直接在小程序端的js中像新增那样调用删除数据库的方法,因为查出来很多都这样写的,文档也是这样写的,但这时候,就算我的代码和他们的一样,也没删除成功(就是上面那只种写法)。。。。就是提示删除成功了,但是数据库里还是一样的。这个时候我查到了一种说法,说是小程序端的删除失效了。。必须要写到云函数端那边。 于是我把方法改到云函数端那边写,就能成功删除了代码如下 js代码: 云函数端的代码如下: 云函数这边 ,修改和删除写法差不多
一个是要确保有这个sdk,可以下载这个依赖:npm install --save wx-server-sdk@latest 然后确保环境id没问题: 还不行的话 要确保这个函数得是自己右键新建nodejs云函数的,这样才有里面的一些依赖 云函数Db or Table not exist. Please check your request这个可能是你数据库里的数据库名称是大写或者驼峰了...应该是不支持吧,换成全小写就可以了 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |