• 微信官方文档: ![图片说明](https://img-ask.csdn.net/upload/201611/08/1478578729_412430.png) 我自己的: ![图片说明](https://img-ask.csdn.net/upload/201611/08/1478578751_554446.png) 大家可对比下两张图片...
  • 微信小程序很方便,给开发者提供了它自己的后台,接下来我们来熟悉一下微信小程序的云开发控制台吧。 1.后台在哪里? 点击“云开发”(如果没有云开发按钮,说明在创建这个微信小程序的时候点击了“不使用云开发”,...

    前言

    微信小程序很方便,给开发者提供了它自己的后台,接下来我们来熟悉一下微信小程序的云开发控制台吧。

    1.后台在哪里?

    点击“云开发”(如果没有云开发按钮,说明在创建这个微信小程序的时候点击了“不使用云开发”,要点击“使用云开发”哦)
    在这里插入图片描述
    下图是没有选择云开发的样子
    在这里插入图片描述
    点击后,此时映入眼帘的有4个按钮
    在这里插入图片描述
    运营分析可以略过,接下来逐一介绍数据库、存储、和云函数。

    2.数据库

    数据库,就是存放用户信息,其他数据信息的地方。
    在这里插入图片描述

    2.1 什么是集合?

    集合就是同一类信息存放的集中体,比如用户的个人信息,有账号、密码、个人收藏…这些都是一类的功能,我们可以创建一个叫做users的集合,里面存放这些信息。
    如下图所示创建一个集合吧,就以users为名字!
    在这里插入图片描述

    2.2 什么是记录

    记录是集合的组成部分,集合里每一条信息就叫做记录,以users集合为例,一条记录里面保存就是一位用户的信息。点击“添加记录”可以手动添加一条记录。
    在这里插入图片描述

    用默认的ID即可,点击确认。在这里插入图片描述
    创建后就是这样子。
    在这里插入图片描述

    2.3 什么是字段

    字段是记录的组成部分,许多字段组成一条记录。以users集合为例,字段应该有用户账号(account)、密码(password)等信息,接下来我们手动添加这两条信息。点击“添加字段”吧。
    在这里插入图片描述
    输入字段名称,值可以暂时为空,也可以随意填入。
    在这里插入图片描述
    用同样的方法添加一条叫做password的字段。
    在这里插入图片描述
    以此类推,数据库就是这样保存数据的,通过微信的js函数、云函数可以访问数据库,从而获取数据。

    3. 什么是存储?

    存储是存放图片、视频、音频等数据流的地方,接下来以存储图片为例。
    以这张图片为例,通过观察代码,可以知道当前这张图片是存储在本地的
    在这里插入图片描述
    在这里插入图片描述

    接下来我们把图片上传到云存储中,然后让小程序加载网络图片。

    点击“云开发”->“存储”->“上传文件”
    在这里插入图片描述
    找到刚才那张螃蟹的照片,点击上传,等待上传。
    在这里插入图片描述
    上传成功后就是这样子的
    在这里插入图片描述
    把刚才上传文件的File ID复制过来
    在这里插入图片描述

    找到刚才放螃蟹图片的文件夹,把当前复制过来的File ID替换进来。
    在这里插入图片描述
    在这里插入图片描述
    按Ctrl+S重新加载界面就可以成功显示了。

    4.云函数

    4.1 什么是云函数?

    以登陆云函数(login)为例,用户在前端输入账号和密码,点击确认,系统会触发登陆云函数,把刚才用户输入的账号和密码送到服务器端去验证,如果账号和密码都是对的,则允许用户登陆,反之不允许登陆。
    因为用户的数据放在云端,这个函数是和云端进行验证,所以叫做云函数。
    “云开发”->“云函数”就是管理云函数的地方,除非云端调试,一般基本不用。

    展开全文
  • 文章目录云开发创建云开发项目打开开发控制台 官方文档 云开发 能力 作用 说明 云函数 无需自建服务器 在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 ...

    官方文档

    微信云开发

    能力 作用 说明
    云函数 无需自建服务器 在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码
    数据库 无需自建数据库 一个可以在小程序前端操作,也能够在云函数中读写的JSON数据库
    存储 无需自建存储和CDN 在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理
    云调用 原生微信服务集成 基于云函数免鉴权使用小程序开放接口的能力,包括服务端调用、获取开放数据等能力

    创建云开发项目

    创建新项目,选择小程序·云开发,输入项目名称,项目目录以及你的AppID(可以用你的微信号在官网上获取),点击新建
    在这里插入图片描述成功创建一个云开发项目,初始化的项目是微信官方给出的一个云开发项目示例(一个实战教程),点击真机调试,打开微信扫描二维码,即可在手机端运行该云开发小程序,根据指引完成简单教程

    打开云开发控制台

    点击微信开发者工具左上方的云开发按钮,打开云开发控制台:
    在这里插入图片描述
    在资源使用中可以看到当前资源的使用量:

    • 数据库容量
    • 存储容量
    • CDN流量/月
    • 云函数调用次数/月
    • 云函数资源使用量/月

    在用户访问中可以看到访问的用户信息以及用户的操作:
    在这里插入图片描述在监控图表中可以更加直观的看到数据库,存储和云函数的状态:
    在这里插入图片描述此外,还可以进行数据库操作,查看存储和云函数的状态:

    • 通过点击数据库创建集合(collection),往集合里添加JSON数据,还可以对每个集合设置相应的权限
    • 存储中可以查看存储状态和内容,并且设置权限
    • 云函数中可以查看云函数的状态,并且可以新建云函数,以及查看云函数的输出日志
    展开全文
  • 微信公众平台前端团队打造的前端调试面板。 使用方法: <script src="path/to/vconsole.min.js"></script> <script> console.log("test"); &lt...

    问题: 手机端H5页面有时候并不知道问题出在什么地方,不方便前端调试。
    方法:

    1 : 工具 vConsole

    微信公众平台前端团队打造的前端调试面板。
    使用方法:

    <script src="path/to/vconsole.min.js"></script>
    <script>
    	console.log("test");
    </script>	
    

    【注】只能打印console数据,不能打断点

    2:

    直接在微信里面打开地址:
    http://debugx5.qq.com
    设置里面的信息,勾选相关条件

    在这里插入图片描述
    设置好后,打开要调试的H5页面就可以看到有个小绿标。

    展开全文
  • 但是开发者在设计登录和注册的页面时,总是避免不了使用数据库,而且后续还需要从云开发控制台的数据库中获取用户信息,因此登录和云开发控制台数据库相结合的操作十分适合初入门微信小程序接触后台的开发者。...

    微信小程序可以使用授权登录来获取用户的信息,免打扰的操作让用户省了不少心,但是开发者在设计登录和注册的页面时,总是避免不了使用数据库,而且后续还需要从云开发控制台的数据库中获取用户信息,因此登录和云开发控制台数据库相结合的操作十分适合初入门微信小程序接触后台的开发者。

    1.登陆界面的设计

    login.wxml
    代码如下:

    <view class="content">
    
      <view class="account">
      <view class="title">账号</view>
      <view class="num"><input bindinput="inputName" placeholder="用户名"  placeholder-style="color:#999999;"/></view>
      </view>
    
      <view class="hr"></view>
    
      <view class="account">
      <view class="title">密码</view>
      <view class="num">
      <input bindinput="inputPassword" placeholder="请输入密码" password/></view>
      </view>
    
      <view class="hr"></view>
    
      <button class="btn" type="primary" bindtap="login">登录</button> 
       
    </view>
    

    login.wxss
    代码如下:

    .content{
      margin-top: 40px;
    }
    .account{
       display: flex;
       flex-direction: row;
       padding-left: 20px;
       padding-top: 20px;
       padding-bottom: 10px;
       width: 90%;
    }
    .title{
       margin-right: 30px;
       font-weight: bold;
    }
    .hr{
      border: 1px solid #cccccc;
      opacity: 0.2;
      width: 90%;
      margin: 0 auto;
      background-color: red;
    }
    .btn{
      width: 90%;
      margin-top:40px;
      color: #999999;
    }
    

    示例界面图如下:
    在这里插入图片描述

    2.云开发控制台内预先设定好账号与密码

    1.打开云开发控制台(还没有注册过云开发控制台的开发者,可以百度如何注册云开发控制台获取环境ID
    在这里插入图片描述

    2.设置好账号和密码
    在这里插入图片描述

    选择数据库,点击添加集合的“+”号,给自己的集合取一个名字,我这里的名字叫做user。点击添加记录,数据库会自动生成一个id,点击添加字段,设置好自己的账号和密码就行了。

    3.登陆界面的JS

    在上面的login.xml里,当用户按下绿色按钮进行登录时,后台就会把数据发送到数据库进行校验,而负责传送数据的JS函数就是——login()

    代码如下:
    login.js

    // pages/login/login.js
    let app = getApp();
    // 获取云数据库引用
    const db = wx.cloud.database();
    const admin = db.collection('user');//注意,这里就是刚才的集合的名字——user
    let name = null;//变量,用于存放用户输入的账号
    let password = null;//变量,用于存放用户输入的密码
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
      //输入用户名
      inputName: function (event) {
        name = event.detail.value//将用户输入的账号放到变量里面
      },
      //输入密码
      inputPassword(event) {
        password = event.detail.value//将用户输入的密码放到变量里面
      },
      //登陆函数
      login() {
        let that = this;
        //登陆获取用户信息
        admin.get({
          success: (res) => {
            let user = res.data;
             console.log(res.data);
            for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
              if (name === user[i].account) { //用户名存在
                if (password !== user[i].password) {  //判断密码是否正确
                  wx.showToast({
                    title: '密码错误!!',
                    icon: 'none',
                    duration: 2500
                  })
                } else {
                  console.log('登陆成功!')
                  wx.showToast({
                    title: '登陆成功!!',
                    icon: 'success',
                    duration: 2500
                  })
    
                  wx.switchTab({
                    url: '/pages/index/index',//这里是成功登录后跳转的页面
                  })
                }
              } else {   //不存在
                wx.showToast({
                  title: '无此用户名!!',
                  icon: 'none',
                  duration: 2500
                })
              }
            }
          }
        })
      }
    })
    
    

    最后实际效果就是这样啦。在这里插入图片描述

    展开全文
  • 1. 删除微信小程序以前安装的版本,只保留最新版本。(我的上一次解决方式) 2.另建一个新的文件夹,再重新安装一下。小程序安装时路径默认有中文,删掉,保持路径全英文。(我的本次解决方式) 3.尝试用管理员...

    1. 删除微信小程序以前安装的版本,只保留最新版本。(我的上一次解决方式)

    2. 另建一个新的文件夹,再重新安装一下。小程序安装时路径默认有中文,删掉,保持路径全英文。(我的本次解决方式)

    3. 尝试用管理员权限运行程序(网上说的)

    4. 删除桌面自动建立的快捷方式,在安装文件的文件夹下找到:wechatdevtools.exe文件,将它发送到桌面快捷方式(别人发的)

     

    展开全文
  • 微信浏览器调试

    2017-06-09 18:01:12
    微信浏览器调试
  • 为了抢得先机许多人开始吧目标瞄准了小程序,开始利用开发工具开发小程序,那么微信官方的小程序开发工具怎么使用?1. 获取微信小程序的 AppID首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并...
  • 移动端项目,有时候想看console的内容,但是无法打开控制台去查看。chrome 查看是非常方便,最近了解到了 vConsole ,非常方便的可以解决这样的问题。 点击 官方文档 查看详情 nuxt示例 npm 安装 npm install ...
  • 微信开发与代码的编写(一) 微信开发环境的搭建 目前移动开发处于比较火的的趋势,很多的开发者都跃跃欲试,目前移动App开发领域主要分为以下几种类型    我在平时的工作中接触得比较多的就是基于Android的Native...
  • 微信小程序云开发文档 新建云开发模板 新建项目选择一个空目录,填入 AppID,勾选创建 “云开发 QuickStart 项目”,点击创建即可得到一个展示云开发基础能力的示例小程序。 开通云开发、创建环境 在使用云开发...
  • 这个问题我查看了许多...如果你将你的应用中在微信开发平台认证过来,这个是要掏钱的;你点微官网app的下载,是可以直接跳到APP Store里面,检测这个应用是否已经下载,如果下载,直接打开; 而对于android 端,相...
  • 微信公众平台为公众号开发者提供了网页版的接口调试工具,开发者可以直接在网页中调用对应的接口,比如获取access_token接口,创建菜单接口,发送消息接口 等等。 先看一下界面,访问: ...一、接口类型:因为...
  • 如题:苹果手机微信浏览器和电脑浏览器打开项目链接白屏,而且ie11浏览器也不能够正常打开,报错语法错误, 安卓手机却可以正常的打开链接显示? 排除过程,以为是微信内置浏览器不支持,想到会不会是兼容的问题,...
  • 1.概述 企业微信上是这样介绍的。不过经本人的研究测试,该工作流引擎的功能是比较有限的。 首先只有移动端才能发起,...2.企业微信开发基础 文档链接: https://work.weixin.qq.com/api/doc#90000/90135/90665...
  • 打开控制台查看demo输出语法分析是遍历每个标记,寻找语法信息,并且构建一个叫做AST(抽象语法树)的对象。下面我们对上面词法分析生成的标记 [{type: "word", value: "Paper"}, {type: "...
  • 只需要四步即可部署属于自己的小程序开发环境...使用小程序绑定的微信扫码即可将小程序授权给腾讯云,开通之后会自动进去腾讯云微信小程序控制台,显示开发环境已开通,此时可以进行后续操作。注意:此时通过小程序...
  • 在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊。友好的微信给我们提供了这么一个入口,使开发者可以真机调试。给微信开发...
  • 格式调整- Ctrl+S:保存文件- Ctrl+[, Ctrl+]:代码行缩进- Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块- Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行- Shift+Alt+F:代码格式化- Alt+Up,Alt+...
  • 微信公众号主要有以下几个步骤 微信公众号的通讯机制 微信公众号简介 1.注册微信公众号 2.注册测试公众号 3.搭建微信本地调试环境 1)下载客户端natapp: 2)安装natapp: 4.微信公众号接入(校验签名) 第1步中...
1 2 3 4 5 ... 20
收藏数 6,528
精华内容 2,611