精华内容
参与话题
问答
  • 微信小程序云开发微信小程序云开发
  • 【系】微信小程序云开发实战坚果商城-目录

    万次阅读 多人点赞 2019-11-19 11:25:54
    【系】微信小程序云开发实战坚果商城 目录 开篇 【系】微信小程序云开发实战坚果商城-开篇 基础篇 【系】微信小程序云开发实战坚果商城-弹性盒子 【系】微信小程序云开发实战坚果商城-ES6 简单入门 【系】...

    【系】微信小程序云开发实战坚果商城

    目录

    源码地址

    在搭建项目前,根据自己需要下载本系列文章的源代码
    gitee 源码地址:https://gitee.com/mtcarpenter/nux-shop
    github 源码地址:https://github.com/mtcarpenter/nux-shop

    获取 PDF

    欢迎微信搜索「山间木匠」,后台回复关键字「坚果商城」可以免费获取我为你精心准备的坚果商城 PDF 版。

    展开全文
  • 微信小程序云开发(数据库)

    万次阅读 多人点赞 2018-09-21 15:29:21
    开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速...

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

    云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

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

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

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

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

    具体的可以去小程序文档上查看,下面用一个登录注册的案例来演示小程序云开发数据库的运用

    注册

    在创建的时候,要在点下一步的时候,调数据库来看用户名有没有重复的。在点击同意的时候来调用数据库,然后把所有的判断放到下一步来判断。所有条件都满足就将用户名和密码放到全局变量中。

    var app = getApp();
    Page({
      data: {
        userName: '',
        userPassword: '',
        userPasswordAgain: '',
        checkbox: false,
        repetition: false
      },
      // 返回主页面
      backHomeTap: function() {
        wx.switchTab({
          url: '../index/index',
        })
      },
      // 绑定
      bindingTap: function () {
        wx.redirectTo({
          url: '../login/login',
        })
      },
      // 用户名
      userNameInput: function(e) {
        this.setData({
          userName: e.detail.value
        });
      },
      // 密码
      userPasswordInput: function(e) {
        this.setData({
          userPassword: e.detail.value
        });
      },
      // 再次输入密码
      userPasswordAgainInput: function(e) {
        this.setData({
          userPasswordAgain: e.detail.value
        });
      },
      // 同意
      checkboxChange: function() {
        if (this.data.checkbox === false) {
          this.setData({
            checkbox: true
          })
        } else {
          this.setData({
            checkbox: false
          })
        }
        var that = this;
        var userName = this.data.userName;
        // 初始化云
        wx.cloud.init({
          env: 'wubaib-9543f7',
          traceUser: true
        });
        // 初始化数据库
        const db = wx.cloud.database();
        const _ = db.command;
        db.collection('userInformation').where({
          userName: _.eq(userName)
        }).get({
          success: function (res) {
            if (res.data.length === 1) {
              that.setData({
                repetition: true
              })
            }
          }
        })
      },
      // 下一步,完善个人信息
      perfectInforTap: function() {
        var userName = this.data.userName;
        var userPassword = this.data.userPassword;
        var checkbox = this.data.checkbox;
        var userPasswordAgain = this.data.userPasswordAgain;
        var name = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
        var repetition = this.data.repetition;
        if (userName === '') {
          wx.showToast({
            title: '请输入用户名',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!name.test(userName)) {
          wx.showToast({
            title: '用户名格式不正确',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (repetition === true) {
          wx.showToast({
            title: '用户名已存在',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (userPassword === '') {
          wx.showToast({
            title: '请输入密码',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (userPassword.length < 6) {
          wx.showToast({
            title: '密码最少6位',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (userPassword !== userPasswordAgain) {
          wx.showToast({
            title: '两次密码输入不一致',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (checkbox === false) {
          wx.showToast({
            title: '请选中已阅读',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else {
          wx.redirectTo({
            url: 'perfectInfor/perfectInfor',
          })
          // 保存用户名和密码
          app.appData.account = {
            userName: userName,
            userPassword: userPassword
          }
        }
      }
    })

    在完善信息的时候获取所有的变量(用户名和密码也在内),然后在点击下一步完成按钮将数据上传到数据库。

    ​
    var app = getApp();
    Page({
      data: {
        userName: '',
        userPassword: '',
        phone: '',
        realName: '',
        card: '',
        email: '',
      },
      // 返回主界面
      backHomeTap: function() {
        wx.switchTab({
          url: '../../index/index',
        })
      },
      // 手机号
      phoneInput: function(e) {
        this.setData({
          phone: e.detail.value
        });
      },
      // 真实姓名
      nameInput: function(e) {
        this.setData({
          realName: e.detail.value
        });
      },
      // 身份证
      cardInput: function(e) {
        this.setData({
          card: e.detail.value
        })
      },
      // email
      emailInput: function(e) {
        this.setData({
          email: e.detail.value
        })
      },
      // 下一步完成
      registerSuccessTap: function() {
        var phone = this.data.phone;
        var realName = this.data.realName;
        var card = this.data.card;
        var email = this.data.email;
        var userName = this.data.userName;
        var userPassword = this.data.userPassword;
        var phonereg = /^1[345789]\d{9}$/;
        var namereg = /^[\u4E00-\u9FA5]+$/;
        var cardreg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/;
        var emailreg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
        var that = this;
        if (phone === '') {
          wx.showToast({
            title: '请输入手机号',
            icon: 'none',
            duration: 2000,
            mask: true
          });
        } else if (!phonereg.test(phone)) {
          wx.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!namereg.test(realName)) {
          wx.showToast({
            title: '请输入正确的名字',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (card === '') {
          wx.showToast({
            title: '请输入身份证',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!cardreg.test(card)) {
          wx.showToast({
            title: '请输入正确的身份证',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (email === '') {
          wx.showToast({
            title: '请输入邮箱',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else if (!emailreg.test(email)) {
          wx.showToast({
            title: '请输入正确的邮箱',
            icon: 'none',
            duration: 2000,
            mask: true
          })
        } else {
          // 初始化云
          wx.cloud.init({
            env: 'wubaib-9543f7',
            traceUser: true
          });
          // 初始化数据库
          const db = wx.cloud.database();
          db.collection('userInformation').add({
            // data 字段表示需新增的 JSON 数据
            data: {
              realName: realName,
              userName: userName,
              userPassword: userPassword,
              phone: phone,
              email: email,
              card: card
            },
            success: function(res) {
              // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
              console.log(res);
              console.log(res.errMsg);
            }
          })
        }
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
        this.setData({
          userName: app.appData.account.userName,
          userPassword: app.appData.account.userPassword
        })
      },
    })
    
    ​

    登录

    在登录页面,先获取用户输入的用户名和密码。在点击登录的时候,先根据userName调数据库的密码和用户输入的密码是否相等。如果相等将用户的信息保存到全局变量中。

    ​
    var app = getApp();
    Page({
      data: {
        bindName: '',
        bindPassword: '',
        isChecked: false,
        userName: '',
        phone: '',
        realName: '',
        card: '',
        email: '',
        userId: ''
      },
      // 点击注册账号
      registerTap: function() {
        wx.redirectTo({
          url: '../register/register'
        })
      },
      // 获取用户名
      bindNameInput: function(e) {
        this.setData({
          bindName: e.detail.value
        })
        var that = this;
        if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
          this.setData({
            isChecked: true
          })
        } else if (that.data.bindName.length === 0) {
          this.setData({
            isChecked: false
          })
        }
      },
      // 获取密码
      bindPasswordInput: function(e) {
        this.setData({
          bindPassword: e.detail.value
        })
        var that = this;
        if (that.data.bindName.length !== 0 && that.data.bindPassword.length !== 0) {
          this.setData({
            isChecked: true
          })
        } else if (that.data.bindPassword.length === 0) {
          this.setData({
            isChecked: false
          })
        }
      },
      // 点击登录
      bindingSuccess: function() {
        var that = this;
        var bindName = that.data.bindName;
        var bindPassword = that.data.bindPassword;
        if (bindName.length !== 0 && bindPassword.length !== 0) {
          // 初始化云
          wx.cloud.init({
            env: 'wubaib-9543f7',
            traceUser: true
          });
          // 初始化数据库
          const db = wx.cloud.database();
          db.collection('userInformation').where({
            userName: bindName
          }).get().then(res => {
            console.log(res.data);
            if (res.data[0].userPassword === bindPassword) {
              console.log("登录成功");
              // 保存手机号,真实姓名,身份证号,邮箱 保存用户名
              that.setData({
                userName: res.data[0].userName,
                phone: res.data[0].phone,
                realName: res.data[0].realName,
                card: res.data[0].card,
                email: res.data[0].email,
                userId: res.data[0]._id
              })
              app.appData.userinfo = {
                phone: that.data.phone,
                realName: that.data.realName,
                card: that.data.card,
                email: that.data.email
              }
              app.appData.account = {
                userName: that.data.userName
              }
              app.appData.userId = {
                userId: that.data.userId
              }
              wx.switchTab({
                url: '../personalCenter/personalCenter',
              })
            } else {
              wx.showToast({
                title: '用户名或密码错误',
                icon: 'none',
                duration: 2000
              })
            }
          })
        }
      },
    })
    
    ​

    登录WXML

    <view class='phoneNumberContainer'>
      <input placeholder='用户名' maxlength='11' bindinput="bindNameInput"></input>
    </view>
    <view class='passwordContainer'>
      <input placeholder='密码' password="true" bindinput="bindPasswordInput"></input>
    </view>
    <view class="{{isChecked?'bindingChecked':'bindingNormal'}}" bindtap='bindingSuccess'>立即登录</view>
    <view class='registerContainer' bindtap='registerTap'>注册账号</view>

    注册第一步的WXML

    <!--返回主页  -->
    <view class='backHome' bindtap='backHomeTap'>
      <image src='/images/homeIcon.png' class='backHomeImg'></image>
    </view>
    <!--头部  -->
    <view class='headerContainer'>
      <!--创建账户  -->
      <view class='headerListContainer headerListActive'>
        <view class='headerListView'>1</view>
        <text class='headerListText'>创建账户</text>
      </view>
      <!--完善个人信息  -->
      <view class='headerListContainer'>
        <view class='headerListView'>2</view>
        <text class='headerListText'>完善个人信息</text>
      </view>
      <!--注册成功  -->
      <view class='headerListContainer'>
        <view class='headerListView'>3</view>
        <text class='headerListText'>注册成功</text>
      </view>
      <view class='transverseLineLeft'></view>
      <view class='transverseLineright'></view>
    </view>
    <view class='mainContainer'>
      <!--用户名  -->
      <view class='mainListContainer'>
        <view class='mainListText'>用户名</view>
        <input class='mainListInput' placeholder='请输入数字,字母或中文' maxlength='25' bindinput='userNameInput'></input>
      </view>
      <!--密码  -->
      <view class='mainListContainer'>
        <view class='mainListText'>密码</view>
        <input class='mainListInput' placeholder='长度6~14位' password='true' maxlength='14' bindinput='userPasswordInput'></input>
      </view>
      <!--确认密码  -->
      <view class='mainListContainer'>
        <view class='mainListText'>确认密码</view>
        <input class='mainListInput' placeholder='请再次输入密码' password='true' maxlength='14' bindinput='userPasswordAgainInput'></input>
      </view>
    </view>
    <!--agree  -->
    <view class='agreeContainer'>
      <checkbox class='agreeCheckbox' checked="{{check}}" bindtap="checkboxChange"/>
      <text>我已阅读并接受</text>
      <text class='clause'>《用户注册条款》</text>
    </view>
    <!--nextButton  -->
    <view class='nextButton' bindtap='perfectInforTap'>下一步,完善个人信息</view>
    <!--binding  -->
    <view class='bindingContainer'>
      <text>已有账号</text>
      <text class='binding' bindtap='bindingTap'>请绑定</text>
    </view>

    注册第二步WXML

    <!--返回主页  -->
    <view class='backHome' bindtap='backHomeTap'>
      <image src='/images/homeIcon.png' class='backHomeImg'></image>
    </view>
    <!--头部  -->
    <view class='headerContainer'>
      <!--创建账户  -->
      <view class='headerListContainer headerListOldActive'>
        <view class='headerListView'>1</view>
        <text class='headerListText'>创建账户</text>
      </view>
      <!--完善个人信息  -->
      <view class='headerListContainer headerListActive'>
        <view class='headerListView'>2</view>
        <text class='headerListText'>完善个人信息</text>
      </view>
      <!--注册成功  -->
      <view class='headerListContainer'>
        <view class='headerListView'>3</view>
        <text class='headerListText'>注册成功</text>
      </view>
      <view class='transverseLineLeft'></view>
      <view class='transverseLineright'></view>
    </view>
    <!--main  -->
    <view class='mainContainer'>
      <!--手机  -->
      <view class='mainListContainer'>
        <view class='mainListText'>手机</view>
        <input class='mainListInput' placeholder='请输入手机号码' maxlength="11" bindinput='phoneInput'></input>
      </view>
      <!--真实姓名  -->
      <view class='mainListContainer'>
        <view class='mainListText'>真实姓名</view>
        <input class='mainListInput' placeholder='请输入真实姓名' maxlength='25' bindinput='nameInput'></input>
      </view>
      <!--证件类型  -->
      <view class='mainListContainer'>
        <view class='mainListText'>证件类型</view>
        <view class='cardText'>中华人民共和国居民身份证</view>
      </view>
      <!--证件号码  -->
      <view class='mainListContainer'>
        <view class='mainListText'>证件号码</view>
        <input class='mainListInput' type='idcard' placeholder='请输入身份证号码' maxlength="18" bindinput='cardInput'></input>
      </view>
      <!--邮箱  -->
      <view class='mainListContainer'>
        <view class='mainListText'>邮箱</view>
        <input class='mainListInput' placeholder='请输入常用的邮箱地址' bindinput='emailInput'></input>
      </view>
    </view>
    <!--nextButton  -->
    <view class='nextButton' bindtap='registerSuccessTap'>下一步,完成</view>

    好多人问我要源码,我就不一个一个发了。要源码的自己git下载吧

    下载地址:https://github.com/wubaibin/wx_yunkaifa.git

    展开全文
  • 目录微信小程序云开发源码(垃圾分类源码)小程序云数据库介绍小程序界面小程序体验(扫描下方二维码体现效果)微信小程序源码 微信小程序云开发源码(垃圾分类源码) 最近发现全国大面积开始实行垃圾分类,基于...

    微信小程序云开发源码(垃圾分类源码)

    最近发现全国大面积开始实行垃圾分类,基于自己一直从事软件开发工作,因此在工作闲余时间,接触微信小程序,花费两周的时间开发了垃圾分类小程序,大家可以看看效果,不喜勿喷哦

    小程序云数据库介绍

    在小程序开发初期,由于涉及到后台数据的存储,当时考虑了百云、阿云、企鹅云等,基于人力、物力、财力的各种限制(主要还是没钱),自己在开发过程中优先考虑了腾讯的云开发,使用其后台的数据库,下图是云开发的资源配额,可以根据的使用需求选择不同的版本:
    在这里插入图片描述

    云开发环境创建完成后,按照下图的结构配置了小程序的后台:
    使用的表为rubbishMain

    1. 里面的数据是从网上花费money买来的。
    2. 主要依赖的集合rubbishMain中的字段排列方式就如图所示。
    3. 小程序包含热门搜索搜索统计,及模糊查找的功能。
    4. 针对最新的额外增加了语音识别的功能,效果还可以。
    5. 目前图像识别也已经完成,官方审核已审核通过。

    小程序界面

    下图是搜索的垃圾种类界面:
    在这里插入图片描述
    下图是用户经常查询的热门搜索物品:
    在这里插入图片描述

    小程序体验(扫描下方二维码体验效果)

    在这里插入图片描述

    微信小程序源码

    如果大家觉得体验效果可以的话,可以通过以下方式获取:

    源码链接1:https://download.csdn.net/download/sdfjasad/11705037

    联系方式微信号:wx-jsq

    展开全文
  • 微信小程序 云开发

    2018-11-08 11:44:52
    微信小程序云开发的一些简单功能,上传图片下载和上传数据读取数据(可以根据授权机制读取openid来私有相册). 地址:https://github.com/18379259382/pictureUploading 参考文档:...

    微信小程序云开发的一些简单功能,上传图片下载和上传数据读取数据(可以根据授权机制读取openid来私有相册).

    地址:https://github.com/18379259382/pictureUploading

    参考文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

    展开全文
  • 微信小程序云开发

    2020-03-12 21:40:57
    1、project.config.json -...云开发控制台中查看线上打的日志的方法进行调试; wx-server-sdk安装: npm install --save wx-server-sdk@latest 备注: 1、云开发环境名称无法重命名 2、云开发创建test、release环...
  • 微信小程序云端开发

    2020-04-28 15:44:03
    微信小程序云端开发流程
  • 什么是微信小程序云开发: 个人理解是一套后端服务能力(数据库、文件空间、云函数),相比购买一套服务器空间、数据库、写后端代码,云开发会更方便。(但只限于部分小项目推荐) 创建一个带云开发能力的微信小...
  • 微信小程序云开发数据库问题问题描述 问题描述 例如:在数据提前存储了5条数据内容有: 1、姓名 2、年龄 3、出生日期 4、身份有效日期(如:2019-10-20) 现在需要在界面中显示出 姓名: 年龄: 身份证到期时间倒...
  • 微信小程序开发实战入门,学习小程序云开发,摆脱后台,自己实现后台数据,从此就可以愉快的写小程序,自己实现小程序后台了。
  • 本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下 新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { const db = wx.cloud.database() ...
  • 微信小程序的介绍 小程序云开发功能对于个人开发者来说...微信小程序云开发官方文档地址 初次使用环境搭建 创建一个云开发小程序或者使用云开发功能 在创建项目时就选择小程序-云开发 或者在已经创建好的项目中...

空空如也

1 2 3 4 5 ... 20
收藏数 4,065
精华内容 1,626
关键字:

微信小程序云开发

微信小程序 订阅