网站图片动态换名,重庆市建设工程质量信息网,绵阳公司商务网站制作,重庆设计公司有哪些对于开发微信小程序云开发不知从何起的同学们#xff0c;可以当作一次参考。虽说官方有文档#xff0c;有模板示例#xff0c;但是这些都是片段或者完整的结果展示。对于初学或者开发经验较少的同学们#xff0c;可能不知先从那里入手进行第一步的开发。下面解析下构建微信…对于开发微信小程序云开发不知从何起的同学们可以当作一次参考。虽说官方有文档有模板示例但是这些都是片段或者完整的结果展示。对于初学或者开发经验较少的同学们可能不知先从那里入手进行第一步的开发。下面解析下构建微信小程序云开发的初始步骤让大家能够一步步创建起自己的小程序。
一、创建小程序
1、创建小程序选择了不使用模板会自动默认选中不使用云服务因为选择了示例里面的目录内容结构太多太复杂了示例里的组件扩展等我们也不会全部用到会让自己的小程序雍肿。 2、开通自己的云开发服务其实就是开通云服务器赠有限的免费使用云服务器时间安装步骤开启就可以了因为我的已经开启了。记住此处中出现的环境ID 二、赋予云开发能力 使用云函数 1、与开发能力首先 再我们的项目目录中创建 云函数存放的文件目录 cloudfunctions如下图
鼠标选中编译器中的资源管理器窗口-选中其中的文件 然后 按 shiftaltR 键可打开项目目录再进行目录创建 2、 在项目根目录找到 project.config.json 文件新增 cloudfunctionRoot 字段指定本地已存在的目录作为云开发的本地根目录 保存后或者手动编译 cloudfunctions文件夹 会有云朵的标识 。
3、创建云函数且需要安装云服务扩展 wx-server-sdk
1、鼠标移到如果图急于赶工拍了一张右键云开发目录 选中新建Node.js云函数。 创建了一个login云函数名称根据自己的需求写。 云函数的文件 函数逻辑处理 也根据自己的需求修改图下是默认的示例 2、安装扩展
wx-server-sdk扩展不是再主目录中安装的。
是在cloudfunctions 目录下安装
npm install --save wx-server-sdklatest
如图操作 4、初始化云服务 创建完云函数还得再项目中初始化。
先在根目录创建个config.js 配置文件用于定义某些常量的配置 内容如下
const config {// 云开发环境 IDenvId: xxx-xxxxx,
}
module.exports config
然后打开项目中的 app.js并引用及初始化云服务
// app.js
const config require(./config)
App({//每次进入应用执行只执行一次onLaunch() {//初始化云服务if (!wx.cloud) {console.error(请使用 2.2.3 或以上的基础库以使用云能力)} else {wx.cloud.init({env: config.envId,traceUser: true,})}}})配置完成下面如何使用云函数
5、云函数使用 在wxml页面中 绑定一个点击事件clickLogin 如图 然后再在 js文件中 配置
// index.js
Page({data:{},//获取信息clickLogin(){// console.log(信息);wx.cloud.callFunction({name:login,//云函数名称data:{a:1,b:2,},//传给云函数的参数}).then(res{console.log(res,结果);}).catch(console.error);},})结果如下获取到了用户的 openid unionid等信息 即成功请求了云函数可以着手进行自己微信小程序的云开发了。某些过程还未详细介绍比如编译器中开启云开发过程和 安装云服务扩展 wx-server-sdk 这里有些需要注意的就是根目录还未进行 npm初始化或者安装则node_modules 则会安装到了 cloudfunction下的这个需要注意。
以上时个人操作的见解仅供参考如不足请补充
附上demo资源链接-码云
