精华内容
下载资源
问答
  • Cocos Creator集成微信云开发和调用微信开放能力

    主题

    Cocos Creator集成微信云开发和调用微信开放能力

    特别说明

    CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的补充和分析。

    正文

    上篇讲了如何使用微信云开发作为后台服务,但是它的场景是用于直接在微信开发者工具中创建的项目,而我们的目的是在Cocos Creator项目使用微信云开发,及使用微信生态的开放能力,那么我们该怎么做呢?

    Cocos Creator文档中只提到了怎么发布“微信小游戏”,以及如何使用自带的第三方服务,而Cocos Creator自带的TCB云开发服务,因为局限性太大(具体的原因可以看我之前的文章),被我放弃了。

    我们先来看看,发布微信小游戏的过程:

    1. Cocos Creator项目构建发布微信小游戏

    选择“菜单栏->项目—>构建发布”,如下图:

    各发布配置项的具体含义,可以看这里,我只说一下常用的几项内容:

    • 发布平台:项目要运行的平台,下拉列表中有几大类可以选择“小游戏”、“web”、“Android”、“iOS”、Mac等;

    • 发布路径:项目编译好后的文件存放位置,默认是在根目录的build目录下;

    • 初始场景:即项目运行时,第一个加载的场景

    • appid:如果发布为微信小游戏,这里就是在微信公众平台创建的小程序的appid;

    • 允许分离引擎: 勾选它的目的是为提升小游戏启动速度。引擎分离的好处是,在你手机上已经有其他小游戏已经使用了CocosCreator引擎插件时,我们的小游戏启动时就不会全量的去下载引擎插件了,微信只需要增量更新引擎两个版本的差异部分就可以了。需要特别注意:

      • 微信开发者工具中的 详情 -> 本地设置 -> 调试基础库 需要设置为 2.9.0 或以上版本。
      • 微信开发者工具中的 详情 -> 本地设置 -> 使用本地的插件 选项,用于设置是否禁用引擎插件,通常 无需勾选。(该选项只在微信开发者工具中有效)

    发布配置好之后,先“构建”,完成后再点“运行”。如果第一次运行,还需要到编辑器 “菜单栏”—> “偏好设置” ->原生开发环境中设置微信开发者工具路径。或者,直接打开微信开发者工具,选择导入项目,选择项目根目录下的build目录,打开后可以运行起来。

    2. 减小的引擎包的大小

    选择“菜单栏 -> 项目 -> 项目设置 -> 模块设置”,项目场景中没有使用的组件模块,在项目打包时,可以不编译进引擎包中,因为引擎包的大小也是算在首包包体中,如下图:

    3. 如何集成微信开发工具的云开发

    上面讲了项目发布构建后的目录默认是在项目根目录下的build,在微信工具中运行的也是build目录,按照上一节讲的云开发使用,是基于微信工具的,那么云开发的代码应该在build目录下了,但是build目录的代码和配置会随着每次构建而变化,而云开发的代码和配置也会被覆盖掉,然后要每次都重新配置。如果是这样,肯定不行啊,下面说一种我觉得比较方便的解决方法:

    上一章提了微信工具创建的小游戏项目project.config.json文件,增加cloudfunctionRoot字段,用于指定本地已存在的目录作为云开发的本地根目录,那么project.config.json文件肯定也有用于指定本地已存在的目录作为小游戏的本地根目录的字段了。

    project.config.json文件中搜索miniprogramRoot,指定当前项目中的一个目录:

    {
      "miniprogramRoot": "wechatgame/"
    }
    

    而我们只需要把CocosCreator项目构建的发布路径build修改成微信工具创建项目的根目录,这样CocosCreator项目的代码编译好后,在微信工具项目中云开发的相关配置不会被覆盖掉,而且项目还把cocos项目编译后的代码,作为小游戏代码直接运行了。

    当然还有其他的集成方式,比如cocos项目中创建buildTemplate模版目录,也可以集成微信云开发。

    4. 调用微信开放能力

    要在Cocos项目中使用微信生态能力,比如:分享、云函数调用、用户信息等,代码要怎么实现呢?

    第一时间跑去查阅官方文档,可是文档中根本没有类似的说明,没办法只能去Cocos社区搜一下了,找了一圈下来,只找到一些代码片段,用法跟在微信开发工具中使用的方法没有不同啊,都是使用wx.开头,照着写到js脚本中,然后模拟器运行,报错Uncaught ReferenceError: wx is not defined

    其实是我思维被限制住了,要使用微信小程序的api能力,当然需要到微信开发工具下,才能正常使用,所以需要区分运行环境,如下代码:

    if (cc.sys.platform === cc.sys.WECHAT_GAME) {
        //微信小游戏环境下才执行
        wx.cloud.callFunction({
            name: 'query',
            data: {},
            success: res => {},
            fail: err => {}
        })
    }
    

    比较不友好的是,在VS Code编辑js脚本时,使用微信的api没有智能提示功能。

    总结

    1. Cocos Creator项目集成微信云开发,通过将Cocos项目代码构建好后,放到微信工具中带有云开发能力的项目目录下。

    2. Cocos项目调用微信开放能力,和在微信工具创建的项目中用法一致,只是多了一步判断运行环境。

    结尾

    既然您看到这了,说明文章对你还有吸引力,帮忙点个赞再走吧,谢谢!

    关注我的公众号「掉队程序员」,持续输出更多内容!

    自己动手写,分解项目中的各个模块需求,通过查文档和搜索Cocos社区,解决碰到的问题,最终在微信上线了下面这款微信小游戏《成语锦衣卫》,欢迎大家扫码体验,并作为参考项目模版,开发出属于自己的小游戏
    欢迎大家扫码体验

    预告

    下一节和朋友们说一说:Cocos Creator不同分辨率的背景图和场景内容适配

    展开全文
  • 微信云开发

    2021-05-20 01:09:08
    本次学习,创建了一个不基于云开发功能的小程序 初始环境变量设置 在app.js中设置云环境变量(图中的符号写错了,要用英文写! ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210520012034678.png 在数据库...

    微信小程序开发

    本次学习,创建了一个不基于云开发功能的小程序
    初始环境变量设置
    云开发环境变量设置
    在app.js中设置云环境变量(图中的符号写错了,要用英文写!
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210520012034678.png

    在数据库中添加类别内容

    添加商品数据
    在 云开发中选择数据库,再点击添加数据,然后就自己编吧!

    在shujuku.js中用get方法取数据库里的数据

    在这里插入图片描述

    展开全文
  • uniapp 微信云开发静态网页和云函数跳转小程序云开发静态网站的创建云函数及copy-webpack-plugin安装copy-webpack-plugin可能遇到的问题静态网站和云函数的搭配使用静态网站代码云函数代码云开发权限配置 ...

    云开发静态网站的创建

    1.官网上下载静态网站事例
    在这里插入图片描述
    2.将下载下来的代码打开将html里面含有<!-- replace -->替换成自己小程序的信息:

    小程序 AppID:填入你的小程序 AppID
    云开发环境 ID:填入你的开通了静态网站托管的云开发环境 ID
    小程序原始账号 ID:填入要跳转的小程序原始账号 ID(gh_ 开头)
    小程序页面路径:填入要跳转到的小程序的页面路径
    小程序名称:填入要跳转到的小程序名称

    3.完成静态页面的内容后,微信开发者工具 => 云开发 => 更多 => 静态网站 => 上传文件
    4.上传成功后,可以在文件后面点击详情 => 下载地址,进行访问

    云函数及copy-webpack-plugin

    1.uniapp 项目中创建存放云函数的文件夹,我这里创建的名为 cloud,并在其中创建个js文件随便写点什么(为了后面识别到目录)
    在这里插入图片描述
    2.uniapp manifest.json文件关联云函数目录(目录名称和刚才建的目录名一致,我的是cloud)

    "mp-weixin" : {
            "appid" : "xxxxxxxx",
    		"cloudfunctionRoot" : "./cloud/"// 这一行就是标记云函数目录的字段
        },
    

    3.引入copy-webpack-plugin,新建vue.config.js,

    (copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中,避免了每次将uniapp打包后丢失云函数)

    const path = require('path')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    
    module.exports = {
        configureWebpack: {
            plugins: [
                new CopyWebpackPlugin([
                    {
                        from: path.join(__dirname, 'cloud'),//关联cloud目录
                        to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloud')//关联cloud目录
                    }
                ])
            ]
        }
    }
    

    4.运行项目,根据报错安装插件,

    npm install -save copy-webpack-plugin

    5.HBuilderX运行小程序到小程序开发工具
    6.右键函数目录 => 新建Node.js 云函数(我这里命名为open)
    在这里插入图片描述
    7.修改云函数中的index.js 文件,替换为官网的事例,并修改为自己的页面路径
    8.完成云函数后,右键云函数(我这里命名为open),上传并部署
    在这里插入图片描述
    9.这时候 微信开发工具 =》 云开发 => 云函数,能看到刚才部署的open函数
    10.云函数创建好后,将其代码复制到Hbuilder X的uni-app项目,后续代码改动可直接在uni-app项目中修改,但是云函数上传部署依旧在微信开发者工具。

    安装copy-webpack-plugin可能遇到的问题

    1.报错TypeError: compilation.getCache is not a function
    主要是安装的copy-webpack-plugin版本太高,而当前webpack版本太低,不支持,高版本的配置语法也变了。
    移除copy-webpack-plugin, 安装5.0版本的copy-webpack-plugin即可解决!

    npm install -save copy-webpack-plugin@5.0

    静态网站和云函数的搭配使用

    静态网站代码

    1.onclick="openWeapp()" 页面点击事件调用云函数方法

    name:对应云函数名称, action:云函数中的方法名

    async function openWeapp(onBeforeJump) {
    	var c = window.c
    	const res = await c.callFunction({
    		name: 'open', //对应云函数名称
    		data: {
    			action: 'getUrlScheme',//云函数中的方法名
    		},
    	})
    	console.warn(res)
    	if (onBeforeJump) {
    		onBeforeJump()
    	}
    	location.href = res.result.openlink
    }
    

    2.wx-open-launch-weapp 用于处理在微信浏览器环境的跳转小程序,

    path:页面的跳转路径,可拼接参数,如:path="/pages/webview/webview?url=xxxx"

    云函数代码

    1.getUrlScheme 方法

    async function getUrlScheme() {
      return cloud.openapi.urlscheme.generate({
        jumpWxa: {
          path: '/pages/webview/webview', // 页面跳转小程序的页面路径
          query: '',//参数
        },
        // 如果想不过期则置为 false,并可以存到数据库
        isExpire: false,
        // 一分钟有效期
        expireTime: parseInt(Date.now() / 1000 + 60),
      })
    }
    

    云开发权限配置

    需要将权限都打开,否则可能会导致不能正常跳转

    1.云开发 => 设置 => 权限设置,将未登录用户访问权限、云托管令牌使用权限等权限打开
    2.云开发 => 云函数 => 云函数权限设置 => 修改 => 允许所有用户访问

    展开全文
  • 业务逻辑 实现转盘抽奖游戏 需求数据 1.转盘抽奖表 2.转盘奖品对用的卡券表 3.卡券对应的卡券档案表 三表关系 抽奖表的 cardid(卡券ID) 等于 卡券表的(id) ,卡券表的(daid) 等于 卡券档案的主键ID ...

    业务逻辑
    实现转盘抽奖游戏
    需求数据
    1.转盘抽奖表
    2.转盘奖品对用的卡券表
    3.卡券对应的卡券档案表
    三表关系 抽奖表的 cardid(卡券ID) 等于 卡券表的(id) ,卡券表的(daid) 等于 卡券档案的主键ID
    废话不多啥上代码,
    思路:通过 Aggregate.replaceRoot函数把子表数据先转换成主表数据在和后面表做对比

    db.collection('chou_jiang').aggregate()
      .lookup({
        from: 'card',
        localField: 'cardid',
        foreignField: '_id',
        as: 'card'
      })
      .replaceRoot({
        newRoot: $.mergeObjects([$.arrayElemAt(['$card', 0]), '$$ROOT'])
      })
      .lookup({
        from: 'coupon',
        let: {
          daid: '$daid',
        },
        pipeline: $.pipeline()
          .match(_.expr($.eq(['$_id', '$$daid'])))
          .project({
            _id:1,
            cardname:1,
            cardimg:1,
          })
          .done(),
        as: "coupon"
      })
      .end()
    
    
    展开全文
  • 添加 向data数组中添加对象,代码如下,event._id,event.data,id要在哪条数据中添加对象,data为字段push为添加,以下代码,markers库中id为event._id的data字段添加event.data ` const db = cloud.database();...
  • 首先,编译微信小游戏项目: q1
  • cloudfunctions:自带函数。 1.所以上述自带文件夹可以全部删除 pages文件夹内除了index文件夹均可删除 index文件夹内多余的 png图片也可以删除 2.删除多余的代码 打开app.json删除选中的代码,这些代码表示创建...
  • console.log(`imageName`, imageName) return wx.cloud.uploadFile({ // 指定上传到的路径 cloudPath: `liuyan-content-images/${imageName}.png`, // 指定要上传的文件的小程序临时文件路径 filePath: fileItem....
  • 微信云开发中,在数据库中,要操作集合的数据条目时,常常因为缺少_openid的值而不能操作。 这时候需要向这个集合中,新增这个字段并赋值,在云开发控制台 --> 数据库 -->高级操作中,点击+,创建一个空白...
  • 抛砖引玉(3): 微信云开发最佳实践概览微信云开发是一个打通了微信生态的BaaS (后端即服务)平台,开发方便,快捷,计费友好,适合个人开发者,以及小团队使用。它主要由 云数据库,云存储,云函数,用户身份...
  • 介绍微信云开发的使用,包括云开发配置、云函数创建、云函数调用、async和await关键字的用法、云开发控制台的使用。
  • 云开发学习文档 一、项目初始化 1、注册号小程序之后新建项目时不在使用测试号,使用带id的云开发 2.创建好项目之后删除无用的配置项包括云函数 多余的page页面 只留下一个index页面 3、在app.json中删除多余的页面...
  • 微信小程序云开发提供了 HTTP API 访问云开发资源,mp-cloud-http对http请求的api进行简单的封装,方便调用。 安装 使用npm npm install mp-cloud-http 例子 const HttpMpCloud = require('mp-cloud-http') ...
  • 主题 CocosCreator接入微信登录获取openid,微信登录实现方案调研过程 特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上...1. Cocos Creator第三方服务TCB云开发 还没看过CocosCr
  • 至于如何云开发我就不在这里赘述了,请移步微信小程序云开发官方文档,说的很清楚。这篇文章主要跟大家聊一次云开发上传json文件遇到的坑。小程序官方为我们提供了官方API进行数据库操作上传数据,也为我们提供了...
  • 如在云开发数据库的基础介绍中所说,云开发提供了一个 JSON 数据库,本章将介绍以下内容:上手:用控制台创建我的第一个集合,插入我的第一条数据数据类型:了解数据库提供的数据类型权限控制:控制集合与记录的读写...
  • 微信小程序云开发云托管踩坑

    千次阅读 2021-01-24 19:13:19
    微信小程序云开发云托管踩坑 原文:https://www.yuque.com/bubbletg/amco6x/al4wyy 好久好久没做小程序了,今天来重写以前的项目,发现又一个云托管功能,不知道什么时候出来的,于是体验一下。 安装官网配置,遇到...
  • 微信推出了一个小程序云开发工具,开发人员可用云开发和开发微信小程序和小游戏,而且无需设置服务器,云开发为开发人员提供了完整的云支持,削弱了后端和操作维护概念,不需要设置服务器,使用平台提供的API进行...
  • 一个用于存储账号和密码的小程序,使用微信小程序云开发,免服务器。 功能介绍 小程序支持云端存储和本地存储,云端存储数据支持SM4和AES加密,同时支持用户管理,以便授权其他人使用云端存储权限。 体验 部署...
  • 初始化在小程序端开始使用能力前,需先调用wx.cloud.init方法完成能力初始化(注意小程序需先开通云服务,开通的方法是点击工具栏左上角的 “控制台” 按钮)。因此,如果要使用能力,通常我们在小程序初始化时...
  • 使用vant weapp做微信云开发实例 1,确保电脑装有node.js 官网下载:https://nodejs.org/en/ 在cmd中测试: 2,新建一个云开发模式下的小程序 3,引入vant库 (1),首先运行npm init -y (2),然后再执行 npm ...
  • 微信云开发实战 开通微信云开发 新建云函数 调试 上传并部署 触发器 本地调试所需环境
  • 抛砖引玉:一种改善微信云开发 , 开发者体验的思路 本篇文章写于 2021-02-27 鄙人才疏学浅,如有谬误,欢迎指正 更多代码的细节在 Github源码链接 中 前言 小程序云开发,作为一种 BaaS 场景,在过去的一段时间内...
  • 因为是学生党,而且并没有很大的需要,所以选择了微信小程序为开发者提供的“云开发”选项。开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。按照微信的说法:云开发为开发者提供...
  • 真正的大师,永远都怀着...说实话,云开发真的很便利,不需要域名,不需要服务器,不需要数据库。直接开通云开发,就能搞定一切。以后应该是属于云开发的时代,和电话手机一样,按量来收取费用,很方便。 二、实现功能
  • 微信小程序云开发创建数据库表 1.进入小程序后点击云开发,开启云开发功能。 2.开启云开发功能后会进入云开发控制台后点击左上角的数据库,后点击下面的“+”创建数据表。表名随便取,你开心就好,我的表名叫...
  • 最新更新的微信 web 开发者工具支持了云开发和之前免费提供的自动部署的测试环境不同,这次是生产和开发都不需要一台独立的服务器了取而代之的是云文件,云函数和云数据库(和 Bmob 云有点像)更新到最新的微信 web ...
  • 根据 name 获得对应的kind,而且需要 遍历 names 这个数组多次调用函数 二、问题描述-如何查询内嵌数据 一般简单的查询就是 回去 单一的一条记录,这次需求是 查询一条记录的 符合条件的 数组对象,然后将该对象...
  • 一.utils文件里面建一个utils.js文件(内容如下) 目录 一.utils文件里面建一个utils.js文件(内容如下) 二.在上传用户详情信息的界面最上方标注 三,在上传的函数中 ...四.... var day = date.getDate(.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 90,894
精华内容 36,357
关键字:

微信云开发