微信小程序云开发_微信小程序云开发,在群消息中点击微信小程序获取微信群信息 - CSDN
  • 熟练掌握WPS文字的基本操作 熟练掌握WPS文字的使用技巧
  • 微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
  • 微信小程序开发实战

    2019-04-01 14:05:00
    本套课程使用了元认知教学法,直接实战式教学,摆脱学院派的理论式讲解,对于0基础的学员可以入门编写微信小程序,过程中指导如何学习使用文档查阅接口等,通过两个完整的实战小项目的实例,入手小程序开发
  • 本课程是以我三年多微信小程序开发的经验分享,目标是带你能快速入门,并能学习到最核心和实用的开发技能。课程以2020年3月份目前最新的,微信小程序开发规范作为指导,以"小象壁纸"小程序作为讲解案例,将相关知识...
  • 本课程使用腾讯目前最为推荐的云开发技术,通过学习本课程,学员可快速掌握Node.js云函数的开发和部署、Mongodb云数据库的设计和操作以及云存储中文件的上传和管理,从未具备快速迭代产品的能力,不论是在面试中...
  • 注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能。 首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去...

    注意:小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能。

    首先我们新建小程序项目,填写申请的appID如果没有需要注册一个,微信为我们提供了一个云开发快速启动的模板,这里我们勾选进去看看云开发为我们提供的案例。

     

     

    首次进入控制台会报cloud init error (云初始化错误)。

    如果我们填写了在微信的左上角调试器旁边有一个云开发,在这里我们点击云开发

    点击开通云开发

    官网建议我们建两个环境一个测试环境一个正式环境,在这里我就新建一个test方便后面的开发

    环境到这里就配置完成了

    再次编译控制台不会提示云开发初始化的准备了。

    下一章微信小程序云开发——模板讲解之云函数

    微信小程序之云开发——模拟后台增删改查案例 https://blog.csdn.net/havendream/article/details/82959458

    展开全文
  • 开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力,6的一匹。 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可...

    今天看到微信推送了一条小程序云上线通知,作为一个前端er,满怀期待的去看了看,很不错先看看文档上怎么说的:

    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力,6的一匹。

    云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。(就是说以后老板让你做小程序,连个后台的人都不用给你配了,自己搞定就行了)。

    目前提供三大基础能力支持:

    • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

    • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

    • 存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

    说白了就是,云函数就是后端代码,现在叫云函数,自己写,自己上传,数据库没什么好说的,就是数据库,不过这个数据库是json数据库,很方便,怎么个方便法呢,看下图:

    传统数据库以mysql为例子:

     

     

    看到int..这么多类型是不是很烦躁,取的时候再合并多个表也很麻烦

    小程序云json数据库:

    看到这些类型是不是很亲切,大大降低了新手对数据库理解,不用学黑窗口,sql命令,还可以导入josn数据,很是方便。

    现在走一遍流程:

    1、创建带小程序云模板的小程序:

    ----新建一个空的文件夹,填入你的appId(必须),官方说 :勾选创建 “云开发 QuickStart 项目”,实际上是"建立云开发快速启动模板",有点坑哦,同学要注意,点击确定 ==>

    2.看到这么多是不是有点方  - -!,看到多了一个东西,点击创建自己的环境,,具体就是写个名字,创个一个环境,官方上说是最好创建俩个环境,一个是开发环境,一个是线上环境。

     

    不做赘述,都是免费的,,看这配置给的也挺良心,一般人真的不用升级配置 ==>

    3.选择环境,环境创建好了,不过还没有使用上

    对第一个文件夹点右键,选择你要使用的环境,下面则是你的云函数,就是跑在服务器上的。

    对login文件夹点右键,选择上传并部署,ps:不上传部署怎么使用呀,所以没毛病。==>

    4.先别急上传个login是怎么使用的,我们先去看点击获取openid是事件,发现,这里只有个name对应上上传的云函数事件名,而云函数直接就返回了openid,看看云函数是怎么实现的

    wx.cloud.callFunction({
          name: 'login',
          data: {},
          success: res => {
            console.log('[云函数] [login] user openid: ', res.result.openid)
            app.globalData.openid = res.result.openid
            wx.navigateTo({
              url: '../userConsole/userConsole',
            })
          },
          fail: err => {
            console.error('[云函数] [login] 调用失败', err)
            wx.navigateTo({
              url: '../deployFunctions/deployFunctions',
            })
          }
        })

     

    // 云函数模板
    // 部署:在 cloud-functions/login 文件夹右击选择 “上传并部署”
    
    /**
     * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
     * 
     * event 参数包含
     * - 小程序端调用传入的 data
     * - 经过微信鉴权直接可信的用户唯一标识 openid 
     * 
     */
    exports.main = (event, context) => {
      console.log(event)
      console.log(context)
    
      // 可执行其他自定义逻辑
      // console.log 的内容可以在云开发云函数调用日志查看
    
      return {
        openid: event.userInfo.openId,
      }
    }
    

    云函数里,直接就能拿到用户的openid和appid并返回,所以在前端上拿到了openid,真的是很方便。==>

    5.关于数据库,数据库那边每一个表都有权限设置,好好看一下。

    创建很简单,读取也很简单,很像slq语句。

    先创建一个db对象,然后直接走collection('表名字').where({条件}).get().then(res=>{}) ,我这里使用的是Promise风格,当然也可以使用回调的方式,就可以把表里的数据都取出来在页面上展示了。

     const db = wx.cloud.database();
            db.collection('todos').where({
                _id: 'W5c0IDWesyZkco4t'
            }).get().then(res => {
                this.setData({
                    dataList: res.data
                })
            })

    更多api还是得看接口https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-server-api/database

    感觉还可以继续完善,使用起来感觉很好,把一切变的简单。

    展开全文
  • 云开发微信登录流程 云开发登录实现 1)miniprogram文件夹下app.js设置env和traceUser:true,跟踪用户信息 wx.cloud.init({ env: 'my-zh8la',//环境ID traceUser: true, }) 2)获取用户信息: exports.main...

    传统微信登录流程

    在这里插入图片描述

    云开发下微信登录流程

    在这里插入图片描述

    云开发登录实现

    1)miniprogram文件夹下app.js设置env和traceUser:true,跟踪用户信息

    wx.cloud.init({
            env: 'my-zh8la',//环境ID
            traceUser: true,
          })
    

    在这里插入图片描述
    2)获取用户信息:

    exports.main = (event, context) => {
      console.log(event)
      console.log(context)
    
      // 可执行其他自定义逻辑
      // console.log 的内容可以在云开发云函数调用日志查看
    
      // 获取 WX Context (微信调用上下文),包括 OPENID、APPID、及 UNIONID(需满足 UNIONID 获取条件)
      const wxContext = cloud.getWXContext()
    
      return {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
      }
    }
    

    需要用户点击按钮来获得授权,从而获取用户信息:
    在这里插入图片描述

    展开全文
  • 前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能。 传送门 借助小程序云开发实现小程序...

    前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能。

    传送门
    借助小程序云开发实现小程序支付功能

    老规矩,先看本节效果图

    我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。
    核心代码就下面这些

    一,创建一个云开发小程序

    关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学,可以去翻看我之前的文章,或者看下我录制的视频:https://edu.csdn.net/course/play/9604/204528

    创建云开发小程序有几点注意的

    1,一定不要忘记在app.js里初始化云开发环境。

    2,创建完云函数后,一定要记得上传

    二, 创建支付的云函数

    1,创建云函数pay

    三,引入三方依赖tenpay

    我们这里引入三方依赖的目的,是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node,我这里不做讲解,百度一下,网上一大堆。

    1,首先右键pay,然后选择在终端中打开

    2,我们使用npm来安装这个依赖。

    在命令行里执行 npm i tenpay



    安装完成后,我们的pay云函数会多出一个package.json 文件

    到这里我们的tenpay依赖就安装好了。

    四,编写云函数pay


    完整代码如下

    //云开发实现支付
    const cloud = require('wx-server-sdk')
    cloud.init()
    
    //1,引入支付的三方依赖
    const tenpay = require('tenpay');
    //2,配置支付信息
    const config = {
      appid: '你的小程序appid', 
      mchid: '你的微信商户号',
      partnerKey: '微信支付安全密钥', 
      notify_url: '支付回调网址,这里可以先随意填一个网址', 
      spbill_create_ip: '127.0.0.1' //这里填这个就可以
    };
    
    exports.main = async(event, context) => {
      const wxContext = cloud.getWXContext()
      let {
        orderid,
        money
      } = event;
      //3,初始化支付
      const api = tenpay.init(config);
    
      let result = await api.getPayParams({
        out_trade_no: orderid,
        body: '商品简单描述',
        total_fee: money, //订单金额(分),
        openid: wxContext.OPENID //付款用户的openid
      });
      return result;
    }
    

    一定要注意把appid,mchid,partnerKey换成你自己的。

    到这里我们获取小程序支付所需参数的云函数代码就编写完成了。
    不要忘记上传这个云函数。

    出现下图就代表上传成功

    五,写一个简单的页面,用来提交订单,调用pay云函数。


    这个页面很简单,
    1,自己随便编写一个订单号(这个订单号要大于6位)
    2,自己随便填写一个订单价(单位是分)
    3,点击按钮,调用pay云函数。获取支付所需参数。

    下图是官方支付api所需要的一些必须参数。

    下图是我们调用pay云函数获取的参数,和上图所需要的是不是一样。
    [图片上传中...(WechatIMG9.jpeg-82c1c2-1565617669894-0)]

    六,调用wx.requestPayment实现支付

    下图是官方的示例代码

    这里不在做具体讲解了,把完整代码给大家贴出来

    // pages/pay/pay.js
    Page({
      //提交订单
      formSubmit: function(e) {
        let that = this;
        let formData = e.detail.value
        console.log('form发生了submit事件,携带数据为:', formData)
        wx.cloud.callFunction({
          name: "pay",
          data: {
            orderid: "" + formData.orderid,
            money: formData.money
          },
          success(res) {
            console.log("提交成功", res.result)
            that.pay(res.result)
          },
          fail(res) {
            console.log("提交失败", res)
          }
        })
      },
    
      //实现小程序支付
      pay(payData) {
        //官方标准的支付方法
        wx.requestPayment({
          timeStamp: payData.timeStamp,
          nonceStr: payData.nonceStr,
          package: payData.package, //统一下单接口返回的 prepay_id 格式如:prepay_id=***
          signType: 'MD5',
          paySign: payData.paySign, //签名
          success(res) {
            console.log("支付成功", res)
          },
          fail(res) {
            console.log("支付失败", res)
          },
          complete(res) {
            console.log("支付完成", res)
          }
        })
      }
    })
    

    到这里,云开发实现小程序支付的功能就完整实现了。

    实现效果

    1,调起支付键盘

    2,支付完成

    3,log日志,可以看出不同支付状态的回调


    上图是支付成功的回调,我们可以在支付成功回调时,改变订单支付状态。

    下图是支付失败的回调,

    下图是支付完成的状态。

    到这里我们就轻松的实现了微信小程序的支付功能了。是不是很简单啊。
    如果感觉图文不是很好理解,我后面会录制视频讲解。

    视频讲解

    https://edu.csdn.net/course/detail/25701

    源码地址:

    https://github.com/qiushi123/xiaochengxu_demos

    014云开发实现小程序支付,就是我们的源码,如果你导入源码或者学习过程中有任何问题,都可以留言或者私信我。大家一起学习,一起进步。

    展开全文
  • 文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写业务逻辑代码 参考文档 云开发文档 先把微信开发工具更新至最新(1.0...

    Good days give you happiness and bad days give you experience.
    顺境带来快乐,逆境带来成长。


    云开发 quickstart

    这是云开发的快速启动指引,其中演示了如何上手使用云开发的三大基础能力:

    • 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 文档型数据库
    • 文件存储:在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
    • 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写业务逻辑代码

    参考文档

    • 云开发文档

    • 先把微信开发工具更新至最新(1.02.1809111)

    注意1:创建一个新项目,注意要在一个空文件夹目录下创建,有隐藏文件的文件夹也不可以。
    注意2:云开发方式,需要appid,请准备好

    • 选择“建立云开发快速启动模版”进行新项目创建

    这里写图片描述

    这里写图片描述

    目录结构如下:

    cloudfunctions
        | - login
    
    miniprogram
        | - images
               | - code-db-inc-dec.png
               | - code-db-onAdd.png
               | - code-db-onQuery.png
               | - code-db-onRemove.png
               | - code-func-sum.png
               | - console-entrance.png
               | - create-collection.png
        | - pages
               | - addFunction
                        | - addFunction.js
                        | - addFunction.json
                        | - addFunction.wxml
                        | - addFunction.wxss
               | - chooseLib
                        | - chooseLib.js
                        | - chooseLib.json
                        | - chooseLib.wxml
                        | - chooseLib.wsxx
               | - databaseGuide
                        | - databaseGuide.js
                        | - databaseGuide.json
                        | - databaseGuide.wxml
                        | - databaseGuide.wxss
               | - deployFunctions
                        | - deployFunctions.js
                        | - deployFunctions.json
                        | - deployFunctions.wxml
                        | - deployFunctions.wxss
               | - index
                        | - index.js
                        | - index.wxml
                        | - index.wxss
                        | - user-unlogin.png
               | - storageConsole
                        | - storageConsole.js
                        | - storageConsole.json
                        | - storageConsole.wxml
                        | - storageConsole.wxss
               | - userConsole
                        | - userConsole.js
                        | - userConsole.json
                        | - userConsole.wxml
                        | - userConsole.wxss
        | - style
               | - guide.wxss
        | - app.js
        | - app.json
        | - app.wxss
    
    README.md
    project.config.json
    • 创建服务环境名称,点击云开发

    这里写图片描述

    • 一个账户可以创建两个环境,一个作为开发环境,一个作为生产环境

    如下图所示这是新建项目中一个简单的获取用户openId的云函数示例

    这里写图片描述

    • cloudfunctions路径下的login文件夹上点击右键,选择创建并部署

    这里写图片描述

    部署成功后,弹出如下界面

    这里写图片描述

    • 在云开发界面的左上角找到“环境ID”并复制

    这里写图片描述

    miniprogram目录下的app.js配置环境ID

    //app.js
    App({
      onLaunch: function () {
    
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({
            env:'你的环境ID',
            traceUser: true,
          })
        }
        this.globalData = {}
      }
    })
    

    保存编译,即可Log你的openId

    这里写图片描述

    打开云开发控制台,点击云函数->login函数->右上角的测试按钮

    把我们在上面获取到的openId修改复制上去,点击运行测试显示测试成功。

    更新目录

    展开全文
  • 微信小程序云开发之初体验 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发。 目前提供三大基础能力支持: 云函数:...
  • 微信小程序如果要用云开发,weui-wxss样式在那里引入,为什么使用云开发,在app.wxss中引入weui-wxss会报错,不引入样式也感觉没什么问题啊
  • 【系】微信小程序云开发实战坚果商城 目录 开篇 【系】微信小程序云开发实战坚果商城-开篇 基础篇 【系】微信小程序云开发实战坚果商城-弹性盒子 【系】微信小程序云开发实战坚果商城-ES6 简单入门 【系】...
  • 浅谈我对微信小程序云开发的认识与见解一、微信小程序云开发的优点1.无需自建服务器2.项目快速上线3.轻轻松松获取用户凭证二、微信小程序云开发的坑1.基础版CDN流量太少2.云数据库限制多(1)小程序端读取限制(2)...
  • 目录微信小程序云开发源码(垃圾分类源码)小程序云数据库介绍小程序界面小程序体验(扫描下方二维码体现效果)微信小程序源码 微信小程序云开发源码(垃圾分类源码) 最近发现全国大面积开始实行垃圾分类,基于...
  • 什么是微信小程序云开发: 个人理解是一套后端服务能力(数据库、文件空间、云函数),相比购买一套服务器空间、数据库、写后端代码,云开发会更方便。(但只限于部分小项目推荐) 创建一个带云开发能力的微信小...
  • 微信小程序云开发入门(一) 摘要:微信小程序云开发是包含了服务器以及数据库的运行环境,而且不需要开发者进行维护,关键是不用服务器验证,步骤简单不少,非常适合个人开发者和创业者使用。虽然云开发需要收费,...
  • 微信小程序云开发云开发云函数数据库存储云开发数据库不能被外部调用微信小程序并发问题 云开发 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,...
  • 微信小程序云开发js抓取网页内容 最近在研究微信小程序的云开发功能。云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试...
  • 微信小程序的介绍 小程序云开发功能对于个人开发者来说...微信小程序云开发官方文档地址 初次使用环境搭建 创建一个云开发小程序或者使用云开发功能 在创建项目时就选择小程序-云开发 或者在已经创建好的项目中...
1 2 3 4 5 ... 20
收藏数 31,511
精华内容 12,604
关键字:

微信小程序云开发