精华内容
下载资源
问答
  • 我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。 1-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。 当然了,也可以直接通过下面链接去下载 ...

    写在前面

    1,讲解视频

    视频课我会在B站免费提供给大家,欢迎关注,欢迎三连。
    https://space.bilibili.com/419474640/video

    2,配套笔记

    配套笔记会在csdn上免费给到大家,欢迎关注,笔记会持续更新。
    https://blog.csdn.net/qiushi_1990

    3,支持石头哥😊

    3-1,源码和配套资源获取

    目前源码和配套的一些资源暂时不免费,如果有需要的同学可以私聊石头哥,拿米来换。

    3-2,笔记电子书

    笔记我也有整理一套电子书,大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。

    4,问题解答(●’◡’●)

    另外石头哥提供配套解答服务。当然了,知识付费时代石头哥解答是要米的,毕竟石头哥精力有限,石头哥也是要吃面包的。石头哥有推出包月,包年解答服务。你在学习过程中有任何问题,或者工作中遇到任何编程问题,都可以来找石头哥
    石头哥目前可以解答如下问题

    • 小程序方面的问题
    • 云开发方面的问题
    • Java,springboot,Javaweb方面的问题
    • 毕设方面的问题
    • 安卓app开发方面的问题
    • html+css+JavaScript方面的问题
    • 前端开发的问题
    • 后端开发的问题
    • 面试找工作方面的问题

    一,认识小程序云开发

    1-1,云开发简介

    • 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

    • 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。

    • 开发者无需搭建服务器,可免鉴权直接使用平台提供的API进行业务开发
      小程序

    • 云开发又简称tcb,是微信官方给我们提供的基于腾讯云的云服务器。目前云开发包含:云数据库,云函数,云存储,云调用。后面章节会具体给大家讲解这几个。

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

    1-2,云开发和传统服务器对比

    云开发相对于传统服务器的优势如下表

    通过上面的对比,我们可以看出,如果你想快速创建一个小程序的后台,用云开发是不错的选择。

    二,微信开发者工具的安装与使用

    工欲善其事必先利其器,我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。

    2-1,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。



    当然了,也可以直接通过下面链接去下载
    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    2-2,下载安装包如下


    不管你是window还是mac电脑,只需要双击安装包实现安装即可。

    等待安装即可

    安装完成

    2-3,进入开发者工具


    第一次进入时,如下

    点击上图的加号,我们来创建一个新项目

    完成上图的配置后,点击新建。即可创建项目。创建好以后的项目如下图所示。

    这样我们就完成了小程序开发者工具的安装了,后面我们就可以开始小程序的代码编写了。

    三,注册小程序

    我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们接下来要讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.

    其实官方给的注册步骤很详细了


    官方注册文档:https://developers.weixin.qq.com/miniprogram/introduction/

    微信小程序注册地址:https://mp.weixin.qq.com/
    进去以后点击立即注册

    进入注册页面时,跟着提示一步步来就可以了

    注意点:

    • 如果只是学习的话,注册个人小程序即可.
    • 如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册
    • 一个邮箱只能注册一个小程序
    • 一个身份证可以注册5个,个人小程序
    • 一个企业的营业执照可以注册50个企业小程序

    四,云开发环境的创建与初始化

    今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项

    • 1,必须注册小程序后才可以开通云开发
    • 2,一个小程序可以创建两个云开发环境

    4-1,创建一个初始项目

    我们要开通云开发服务,必须先要进入小程序开发者工具才可以。

    和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.

    如果你不使用自己的appid创建项目,就会出现下面的问题,所以一定要先去注册一个小程序,然后用自己的appid。

    由于云开发官方更新的太快,有些同学可能会遇到下面这样的问题


    没有 不使用云服务 选型。这个时候该怎么办呢。石头哥也已经更新课程,给大家提供的解决方案。

    4-2,没有“不使用云服务”选型解决方案(选看)

    如果你出现上面的问题,再看这节,如果没出现这样的问题,直接跳过就行。

    我在配套资料里为大家准备了一个空白项目的模板。大家只需要把这个模板下载到桌面,并解压。

    然后点击导入,把项目导入即可。

    然后如下所示,记得appid换成你自己的。

    4-3,开通云开发

    • 1,点击下图箭头所示,如果你第一步创建项目时,没有使用自己的appid,这里不会有下图箭头所示的云朵.
    • 2,给云开发环境取名

      等待创建

      创建成功
    • 3,获取云开发环境id

    4-4,初始化云开发环境(***重要)

    在app.js里写入环境id,注意这里要用你自己的云开发环境id

    • 初始化云开发环境前,先去云开发控制台,拿到云开发环境id,如下图

      这里的环境id建议直接复制,不要手写,很容易写错。

    • 拿到环境id以后,就去app.js里做云开发环境初始化,如下

    用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可.

    五,云开发~云数据库

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html

    5-1,在数据库里新建集合(数据表)

    我们这里以新建一个商品列表为例

    5-2,数据库权限管理

    要想让用户查询到我们创建的商品数据,需要把权限改为所有用户可读

    5-3,数据库的增删改查

    5-3-1,查询 get()

    • 传统写法
    • ES6简洁写法

      推荐第二种写法

    5-3-2,条件查询 where()

    5-3-3,查询单条数据doc()

    doc是用来查询单条数据的。比如商品详情页。
    doc里面用到的参数就是我们数据里的_id字段

    5-3-4,添加数据 add()

    通过add可以实现数据的添加,

    5-3-5,更新数据update()

    修改数据库里已存在的数据,结合doc进行修改单条数据

    5-3-6,删除数据remove()

    删除数据,结合doc删除单条数据

    5-4,增删改查综合案例

    • 1,能查看商品列表
    • 2,更动态添加商品
    • 3,能进入商品详情页
    • 4,能删除某个商品
    • 5,能修改某个商品的价格

    5-4-1 列表跳详情 data-

    • 1,在wxml里定义data- 要绑定的数据
    • 2, 在js页面里的点击方法里拿到绑定的数据
    • 比如打印结果如下
      在这里插入图片描述

    5-4-2,列表跳详情并携带商品id

    • 1,列表跳页到详情页
    • 2,拿到列表跳页时携带的id数据

    5-4-3,查询商品列表

    5-4-4,添加商品并刷新商品列表

    5-4-5,更新商品数据

    用户输入新价格,调用update方法进行更新数据

    我们更新成功的时候,会有如下所示的日志打印。

    只有stats里的updated是1的时候,才代表成功的更新了一条数据。
    如果这条商品不是你创建的,当你对这条商品做更新操作时,打印的updated就是0。

    这个时候代表没有更新成功。这是因为操作时的权限问题,要解决这个问题,就要借助云函数了,这里我们先放在这里,在后面云函数章节会做具体讲解。

    5-4-6,弹窗提示确认是否删除

    用户删除数据是一个危险操作,所以操作之前最好给用户一个友好提示。
    官方弹窗文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

    5-4-7,删除商品

    5-4-8,更新和删除时的权限问题

    如果这条商品不是你创建的,当你对这条商品做删除或者更新操作时,虽然也会返回成功,但是可以看到我们更新或者删除的条数是0。

    其实这个时候也意味着没有更新或者删除成功,这里是因为操作权限的问题,因为这条数据不是你创建的。所以你只能对这条数据做查询操作,而不能做修改和删除操作。要想解决这个问题,就要借助云函数了。后面云函数讲解的部分,我会做具体讲解的。

    我们还是先接着学习数据库操作的高级操作

    5-6,常用快捷键

    我们在开发时为了提高代码编写效率,通常会使用一些快捷键。我们小程序开发工具里常用的快捷键如下。
    设置—》快捷键设置
    在这里插入图片描述
    然后点击如下快捷键即可查看所有的快捷键

    如果感觉默认的快捷键不喜欢,可以自己重新设置快捷键。由于自带的快捷比较多,我这里不一一列举了,我把一些常用的快捷键拿出来给大家大致讲一讲,我这里以window电脑为例,如果你mac电脑,可以自己去看下开发者工具默认的快捷键。多看几遍把常用的记住就行了。

    快捷键组合描述
    Ctrl+a全选
    Ctrl+c复制选中内容
    Ctrl+v粘贴复制的内容
    Ctrl+z撤销当前编辑
    Ctrl+s保存并编译项目
    Ctrl+b重新编译项目
    Ctrl+x截切选中的内容
    Ctrl+/添加注释
    Ctrl+Shift+k删除当前行
    Ctrl+Shift+f全局搜索
    Ctrl+f当前页面内搜索
    Ctrl+Shift+h全局搜索并替换文本
    Ctrl+h当前页面内搜索并替换文本
    Shift+Alt+F格式化代码
    Shift+Alt+⬆向上复制当前行
    Shift+Alt+⬇向下复制当前行
    Alt+⬆把当前行向上移动一行
    Alt+⬇把当前行向下移动一行

    有的电脑上快捷键可能会有细微差距,以开发者工具默认自带的快捷键为准。

    5-7,数据库排序orderBy

    orderBy方法在做排序的时候,接受两个参数

    • 1,根据那个字段排序
    • 2,排序规则(升序或者降序)。升序用asc,降序用desc

    如我们根据商品价格从低到高升序排列

    如我们根据商品价格从高到低降序排列

    5-8,返回指定条数的数据limit

    limit用来指定查询结果集数量上限,比如我们有100条数据,只想返回前20条,我们可以通过limit(20)来指定只返回20条数据。

    例如,只返回3条数据的写法如下

    • 注意:limit 在小程序端默认及最大上限为 20,在云函数端默认及最大上限为 1000

    5-9,分页方法skip

    skip指定查询返回结果时从指定序列后的结果开始返回,常用于分页。比如我们有100条数据,想从第10条开始返回数据,可以通过skip(10)来实现

    • skip结合我们上面学的limit方法可以实现分页效果

    比如我们有100条数据,每次返回20条数据。那么就可以分5页返回。

    • 第1页 limit(20).skip(0)
    • 第2页 limit(20).skip(20)
    • 第3页 limit(20).skip(40)
    • 第4页 limit(20).skip(60)
    • 第5页 limit(20).skip(80)

    5-10,Command数据库操作符

    我门上面学完了数据库的增删改查,但是这些都是最基础最简单的操作,如果我们想实现复杂的数据查询操作,该怎么办呢
    比如

    • 查询价格大于100的商品?
    • 查询年龄小于18岁的学生?
    • 如何同时修改多条数据?
    • 如何同时删除多条数据?

    我们如果想实现上面这些复杂的操作,就需要用到数据库里的 Command数据库操作符,就是下面这位

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html

    5-10-1,gt查询大于指定值的数据

    比如查询价格大于5的所有商品

    5-10-2,gte查询大于等于指定值的数据

    比如查询大于等于5元的商品

    5-10-3,lt查询小于指定数值的数据

    比如查询价格小于5的所有商品

    5-10-4,lte查询小于等于指定数值的数据

    比如查询价格小于等于5元的所有商品

    5-10-5,and同时满足多个条件的查询

    比如查询价格大于5小于10元的所有商品

    六,云开发~云函数

    6-1,认识云函数

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

    我们先来看下官方给出的云函数简介

    其实通俗来讲,云函数也是运行在服务器上的,只不过和我们传统开发语言相比。微信官方为我们提供的傻瓜式的一键部署。也就是说你只需要把心思花在业务逻辑代码的编写上即可。无需关心写好如何部署,无需关心安全问题,无需关心鉴权问题。

    我们下面以获取openid为例,来看看云函数,php,Java的实现对比

    • php获取用户openid

      如果用php来获取openid必须经历下面几步
    • 1,去小程序后台拿到appid和appSecret
    • 2,请求微信的对应接口
    • 3,获取数据后进行解码
    • 4,购买服务器,配置服务器
    • 5,购买域名,域名备案,配置https
    • 6,部署php代码到服务器
    • 7,小程序端调用php接口

    Java获取openid和上面的php步骤一样,也是需要上面7步。而我们用云函数获取openid呢,就只需要简单的3步就行了,代码量也能显著减少

    6-1-1,云函数获取openid

    用云函数的话,只需要3步

    • 1,编写云函数
    • 2,一键部署云函数
    • 3,调用云函数

    来看下云函数代码,只需要10行代码,即可轻松搞定

    6-2,云函数的优势

    我们用云函数和上一章的云数据库进行下对比

    操作云函数云数据库
    返回数据上限100条20条
    更新数据都可以更新只有自己创建的才可以更新
    删除数据都可以删除只有自己创建的才可以删除
    运行环境运行在云端Node.js环境运行在小程序本地
    实现功能丰富度非常丰富只能实现数据库增删改查
    • 来看下官方文档是如何描述云函数的
      云函数属于管理端,在云函数中运行的代码拥有不受限的数据库读写权限和云文件读写权限。需特别注意,云函数运行环境即是管理端,与云函数中的传入的 openId 对应的微信用户是否是小程序的管理员 / 开发者无关。

    6-3,云函数调用演示

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/functions/Cloud.callFunction.html

    6-3-0,初始化云函数的环境

    • 1,创建一个文件夹cloud和pages平行
      在这里插入图片描述
    • 2,在project.config.json里面配置云函数所在目录为cloud
      在project.config.json里面添加如下配置
      然后点击保存,我们的cloud文件夹前面就有一个云朵

      就代表我们云函数初始化成功啦。
    • 新一个云函数
      在这里插入图片描述
    • 如果只创建一个云函数的时候,会出现下面的问题。

      解决方案:只需要在cloud文件夹下新建一个空白文件即可。

    6-3-1,云函数获取openid

    调用云函数有两种写法

    • 1,传统的success和fail
    • 2,用promise写法then和catch

    6-3-2,数据的导入和导出

    • 数据导出,做数据备份

      比如导入为json数据如下
    • 数据导入,为了快速的大量的创建一些数据。
      为了方便付费用户,我这里提前准备好了108条数据,付费用户直接去下载即可

      把下载好的这108条数据的json文件,导入到数据库如下

    6-3-3,云函数获取数据

    注意:云函数只要有变动,就要重新部署,否则云函数不生效。

    遇到了一个问题,如下

    出现原因:如果你有两个云开发环境,偶尔会出现上图所示的问题。
    解决问题:有两种

    • 1,在云函数里指定你要使用那个云开发环境
    • 2,使用DYNAMIC_CURRENT_ENV常量 (提倡使用这个)

      我们这里会和小程序里直接调用数据库的查询进行下对比

    6-3-4,云函数修改数据

    本地小程序直接调用数据库修改会有问题

    • 只能修改自己创建的数据,别人创建的数据,就没有办法修改了。

    • 如何解决呢? 用云函数来修改就可以解决这个问题啦。

    • 1,先创建云函数update0129

    • 2,调用云函数就行修改

    6-3-5,云函数删除数据

    • 1,创建一个删除商品的云函数remove0129
    • 2,调用这个云函数进行删除操作

    6-3-6,提交数据到云函数

    • 1,创建云函数,并部署
    • 2,调用云函数

    6-4,使用云函数常见问题

    6-4-1,云函数里面没有初始化环境变量


    解决方案如下:
    使用DYNAMIC_CURRENT_ENV

    代码片段

    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV 
    })
    

    七,云开发~云存储

    首先来看下官方对云存储的介绍:
    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html

    说白了,云存储就是可以用来存储视频,音频,图片,文件的一个云存储空间。如果你的小程序需要用到视频播放,音频播放,图片展示,文件上传与下载功能,就可以用到我们的云存储了。

    • 使用云存储来存储文件时,文件名的命名有一些规则,建议看一下。

    7-1,云开发控制台管理文件

    控制台也可以很方便的管理文件。

    7-2,上传图片到云存储

    我们上传图片之前需要先选择图片,所以这里用到一个图片选择的功能

    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

    然后调用文件上传的api接口即可

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html

    7-3,给商品列表加商品图片

    我们既然已经学完图片上传功能了,那么我们就可以改造下我们之前的商品列表了,给我们的商品列表添加商品图片。

    7-4,上传视频到云存储

    上传视频之前同样需要先选择视频,选择视频的代码如下

    对应的官方文档如下:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html

    选择好视频以后,同样是调用文件上传api,因为视频也是一个文件。

    7-5,上传word,excel文件到云存储

    7-5-1,上传之前先选择文件

    选择文件的时候记得把type设置为file

    对应的官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

    • 这里有一点需要注意
      在电脑模拟器上是选择电脑上的文件,在手机上运行小程序进行选择文件时是选择你聊天记录里的文件。

    7-5-2,上传文件

    在上面选择好文件以后,我们还是要调用uploadFile进行文件上传

    7-6,下载文件

    使用wx.cloud.downloadFile下载文件
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/storage/downloadFile.html

    7-7,下载并打开word,excel,pdf

    使用wx.openDocument打开文件
    https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html

    八,列表的下拉刷新

    8-1,开启页面下拉刷新

    我们需要在app.json获取页面对应的json里设置enablePullDownRefresh属性为true来开启下拉刷新。



    由于我们的刷新动画默认是白色圆点,所以还要在json里设置页面背景色才可以看到动画。

    8-2,在Page的onPullDownRefresh里监听刷新


    在page里的onPullDownRefresh方法里监听下拉刷新

    8-3,用户下拉刷新时请求最新数据

    8-4,数据请求成功后停止刷新

    我们在下拉刷新时,刷新动画一般很久才结束,正常情况下应该是数据请求成功后就结束刷新动画。所以我们通过wx.stopPullDownRefresh()方法来结束刷新动画。
    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/pull-down-refresh/wx.startPullDownRefresh.html

    代码示例如下

    九,列表的分页加载

    9-1,小程序数据库每次最多20条

    小程序数据库api和云函数调用数据的限制
    小程序端直接调用云数据库时,每次最多可以获取20条,云函数里调用云数据库时每次最多获取100条。所以我们数据多的时候要做分页加载。

    9-2,分页加载的核心方法

    我们做分页加载时,主要用到了skip和limit方法,对应的官方文档如下

    • skip:每页加载多少条
      https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.skip.html
    • limit: 加载第几页的数据https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.limit.html

    其实这个skip和limit我在数据库的那一节有做初步讲解,这一节我们就借助具体分页加载的案例来做综合讲解

    9-3,导入108条数据

    9-3-1,下载数据源

    这108条数据是石头哥提前为付费用户/年卡用户准备好的,如果你没有付费,可以自己去数据库里创建108条数据即可。

    9-3-2,导入到数据表

    我这里导入到num数据表,导入成功如下:

    9-3-3,别忘记修改表权限

    把数据表(集合)的权限改为所有用户可读,仅创建者可读写。

    9-4,上拉加载更多监听

    我们的列表滑动到最后一个数据时,会执行下面的方法

    所以我们的分页加载要在onReachBottom里做。

    9-5,数据库分页加载代码实现

    直接调用数据库每次最多只能加载20条数据

    wxml里只做简单的列表数据显示就行了

    wxss做个简单的样式

    对应的效果如下

    9-5-1,没有更多数据时的友好提示

    9-5-2,加载中和加载完成的友好提示

    • 加载中
       wx.showLoading({
          title: '加载中...',
        })
    
    • 隐藏加载中
    wx.hideLoading()
    

    9-6,通过云函数实现分页加载

    通过云函数调用数据库,每次最多可以加载100条数据.

    • 如果每页20条以内,不建议用云函数
    • 如果分页的时候,每页大于20条,就用云函数。

    十,搜索功能

    今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。

    10-1,需求

    比如我这里有如下的一些数据

    我们想实现如下搜索需求

    • 1,搜索标题(title)包含‘小石头’的数据
    • 2,搜索标题(title)或者描述(desc)包含‘小石头’的数据
    • 3,搜索标题(title)描述(desc)都包含‘小石头’的数据

    我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。

    10-2,实现原理

    我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

    • 再来看看官方示例

      可能看官方示例会有点糊涂,那么我们接下来就结合具体代码来给大家做下讲解。

    10-3,模糊搜索的代码实现

    10-3-1,模糊搜索单个字段

    • 需求:搜索标题(title)包含‘小石头’的数据

    代码如下

    查询结果如下:

    可以看到我们成功的查询到了标题里包含‘小石头的数据’

    10-3-2,模糊搜索多个字段(满足一个即可)

    • 需求:搜索标题(title)或者描述(desc)包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的or

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然标题里没有‘小石头’,但是描述里有,所以也符合。
    • 3,title和desc里都没有‘小石头’,所以不符合。

    10-3-3,模糊搜索多个字段(要同时满足)

    • 需求:搜索标题(title)描述(desc)都包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的and

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然desc里没有‘小石头’,但是title里没有,所以也不符合。
    • 3,title和desc里都没有‘小石头’,所以也不符合。

    10-4,源码

    为例方便大家使用,我把完整的代码贴到这里,后面大家使用时,直接复制这里的代码,略微改造下就可以了。

        //我这里简单起见就把搜索词写死,正常应该用户输入的
        let searchKey = '小石头'
        let db = wx.cloud.database()
        let _ = db.command
    
        db.collection('news')
          .where(_.or([
            {//标题
              title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
                regexp: searchKey,
                options: 'i', //大小写不区分
              }),
            },
            {//描述
              desc: db.RegExp({
                regexp: searchKey,
                options: 'i',
              }),
            }
          ])).get()
          .then(res => {
            console.log('查询成功', res)
          })
          .catch(res => {
            console.log('查询失败', res)
          })
    

    10-5,获取用户输入的搜索词进行搜索

    十一,登录注册

    十二,点赞与收藏

    十三,CMS网页版管理后台

    13-1,开通cms的准备工作

    开通cms需要你云开发里使用按量付费,如果你是第一次开通云开发,记得做如下选择。
    在这里插入图片描述
    如果你已经开通过云开发,记得把付费模式改为按量付费。

    云开发实战案例···》

    实战一,云开发实现订阅消息推送

    之前的通过formid发送模板消息推送,将在2020年1月10日下线,所以我们不得不使用订阅消息了。

    我们先来看下订阅消息的官方简介。

    接下来我们就来借助云开发,来快速实现小程序消息推送的功能。

    1,获取模板 ID

    这一步和我们之前的模板消息推送是一样的,也是先添加模板,然后拿到模板id

    首先是开通订阅消息功能,很简单,如下图

    由于长期性订阅消息,目前仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。仅就线下公共服务这一点,长期性订阅消息就和大部分开发者无缘了。
    所以我们这里只能以使用一次性订阅消息为例。

    如上图,我们从公共模板库里选择一个一次性订阅的模板。然后编辑模板如下图

    下图就是我们添加好的模板,下图的模板id就是我们需要的。

    2,请求用户授权

    我们做订阅消息授权时,只能是用户点击或者支付完成后才可以调起来授权弹窗,官方是这么要求的:

    我们这里用到了wx.requestSubscribeMessage这个方法,来获取用户的授权。

    • 1,编写index.wxml代码
    • 2,编写index.js代码,实现点击获取授权

      这一步tmplIds里的一串字符,就是我们自己添加的模板id
    • 3,点击按钮运行效果如下
      开发者工具模拟器上点击授权弹窗是这样的:

      手机上的授权弹窗是这样的:

      可以看到,这里显示的就是我们添加的 ‘上课提醒’的模板。
      细心的同学可以看到, 真机上多了一个 ‘总是保持以上选择,不再询问’
      其实,你自己仔细多品一些。也能明天,我们正常订阅消息授权时,用户允许的话,你只能推送一次消息。也就是用户允许一次,我们就可以推送一条消息给用户,并且这个允许不存在过期。所以我们可以让用户尽量多的点击允许,这样我们就可以尽量多的给用户发送消息了。

    这里用户允许后,我们就可以给用户推送消息了,接下来我们来借助云开发的云函数来实现消息推送功能。

    3,获取用户的opneid

    先来看官方爸爸是怎么说的。

    可以看出官方提供了两种方式,我们这里使用云调用。说白了就是在云函数里调用推送功能。

    • 推送所需参数

      可以看到我这里用来openapi功能,并且需要用到用户的opneid,关于openid的获取,我之前有写过文章,也录过视频的。文章的话,大家去翻下我历史的文章,视频的话,点击这个即可:《借助云函数获取用户openid》
      这里的openid的获取我就不再详细讲解了,把对应云函数的代码给大家贴出来。

      在使用云开发时,有几点需要注意的
    • 1,需要在project.config.json里创建云函数目录如下图
    • 2,需要在app.js里初始化云开发环境

      至于云开发的环境id从哪里拿,我视频里也讲过很多遍了,直接去看我视频或者翻看我历史文章即可。
      《零基础入门云开发视频》

    4,用云函数实现消息推送

    我们只需要创建一个云函数如下,然后填入用户的openid,要跳转的小程序页面链接,模板内容,模板id即可。通常这些数据都应该传进来,简单起见,我就把这里的模板内容写成固定的。

    注意:我在编写上面的代码时,推送内容的key必须和小程序模板里的key保持一致,否则就会报如下错误。

    • 然后看下调用这个云函数的地方

      如果用户没有授权,我们推送会报如下错误

      如果用户授权过,我们就可以成功推送了,推送后的打印日志如下

      还记得我们真机上的授权吗,如果用户只是点击了允许,没有选择一直允许,那我我们在推送成功一次后,如果再次推送,就需要用户重新授权。否则,还是会报这个错误的

      所以我们用户点击一次允许,我们就可以推送一次消息,比如,我点击了4次允许那么我就可以成功的推送4次

    效果图


    可以看到,我们成功的收到 上课提醒的模板消息,点击进去,就是我们具体的推送内容

    其实我这是连续收到了4条消息,因为我点击了4次允许推送,所以就可以成功的推送4次。

    到这里我们就完整的实现模板消息推送功能了,下面我把主要代码贴给大家,大家也可以私信我获取完整源码。

    • index.wxml
    <button bindtap="shouquan" type='primary'>获取订阅消息授权</button>
    <button bindtap="getOpenid">获取用户的openid并推送消息</button>
    
    • index.js
    //编程小石头wechat:2501902696
    Page({
      //获取授权的点击事件
      shouquan() {
        wx.requestSubscribeMessage({
          tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //这里填入我们生成的模板id
          success(res) {
            console.log('授权成功', res)
          },
          fail(res) {
            console.log('授权失败', res)
          }
        })
      },
      //获取用户的openid
      getOpenid() {
        wx.cloud.callFunction({
          name: "getopenid"
        }).then(res => {
          let openid = res.result.openid
          console.log("获取openid成功", openid)
          this.send(openid)
        }).catch(res => {
          console.log("获取openid失败", res)
        })
      },
      //发送模板消息到指定用户,推送之前要先获取用户的openid
      send(openid) {
        wx.cloud.callFunction({
          name: "sendMsg",
          data: {
            openid: openid
          }
        }).then(res => {
          console.log("推送消息成功", res)
        }).catch(res => {
          console.log("推送消息失败", res)
        })
      }
    })
    
    • 推送对应的云函数
    //编程小石头wechat:2501902696
    const cloud = require('wx-server-sdk')
    cloud.init()
    exports.main = async(event, context) => {
      try {
        const result = await cloud.openapi.subscribeMessage.send({
          touser: event.openid, //要推送给那个用户
          page: 'pages/index/index', //要跳转到那个小程序页面
          data: {//推送的内容
            thing1: {
              value: '小程序入门课程'
            },
            thing6: {
              value: '杭州浙江大学'
            },
            thing7: {
              value: '第一章第一节'
            }
          },
          templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id
        })
        console.log(result)
        return result
      } catch (err) {
        console.log(err)
        return err
      }
    }
    

    后面我会分享更多小程序相关的知识出来,请持续关注。

    注意:授权一次,只能发送一条消息。

    5,发送订阅消息给多个用户

    //发送订阅消息给多个用户
      sendAll() {
        if (name == null || name == '') {
          wx.showToast({
            icon: "none",
            title: '请输入课程名',
          })
          return
        }
        let users = [
          "oc4sa0Vp_s65LEItm4JSWT5WFQds",
          "oc4sa0dZ-pSCu95djiLCt7jo97bY"
        ]
    
        users.forEach(item => {
          console.log("for循环", item)
          this.sendFun(item, name)
        })
      },
      //封装的方式方法
      sendFun(openid, name) {
        wx.cloud.callFunction({
          name: "fasong",
          data: {
            openid: openid,
            name: name
          }
        }).then(res => {
          console.log("发送单条成功", res)
        }).catch(res => {
          console.log("发送单条失败", res)
        })
      }
    

    实战二,短信验证码

    老规矩先看效果图

    普通短信

    验证码短信

    今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜。

    官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html

    进入官方文档一看,云开发给咱们开发者的福利还真不小。
    不仅仅可以很方便的使用短信功能,还送了咱们1000条免费短信。不用白不用嘛。这1000条短信足够咱们把小程序短信功能,和小程序短信验证码功能都学会了。
    废话不多说了,咱们直接来撸代码

    1,使用云开发短信的条件

    这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。

    使用条件

    • 1,必须是企业小程序,目前个人小程序无法使用短信发送
    • 2,必须开通静态网站功能(后面应该会逐步放开)
    • 3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊)

    上面条件都满足以后,我们就可以来愉快的撸代码了。

    年卡福利

    • 1,可以获取石头哥目前所有视频课
    • 2,未来一年内出的新课也可以获取
    • 3,一对一问题解答,远程协助
    • 4,可以借用石头哥的企业小程序

    感兴趣可以加石头哥微♥ 2501902696 备注年卡

    2,开通静态网站功能

    如果你不开通静态网站,直接调用短信发送,会报如下错误。

    其实官方文档里也有给出这个错误。

    那么我们就来开通静态网站功能。开通静态网站功能之前,必须开通云开发,配置好云开发的环境。这些我在云开发入门里讲过很多遍。还不知道的同学可以翻看下我前面的文章或者视频:https://edu.csdn.net/course/detail/26572

    这里开通云开发我们借助小程序开发者工具来实现快速开通。

    2-1,注册小程序

    这里我就不再多说了,只有注册过小程序的appid才可以开通云开发

    我们注册好小程序后,就可以拿到appid了,如上图

    2-2,创建一个小程序项目

    小程序项目的创建,我这里不再多说,我前面小程序基础课里有讲过很多遍。《小程序基础学习》

    这里强调一点,就是创建小程序项目时一定要用我们自己的appid不要用测试号。
    在这里插入图片描述
    如果你一开始是用测试appid创建的,也可以通过上图的方式更换成自己的小程序的appid。

    2-3,开通云开发

    这里云开发的开通,我就不做过多讲解了,我云开发课程里也讲过很多遍。大家可以去翻看下

    只需要点击开发者工具里的云开发按钮,跟着提示一步步操作就可以快速开通云开发。

    2-4,开通静态网站功能


    我们上面云开发开通好以后,就可以在这里快速开通静态网站了。

    点击以后,直接点击开通即可

    这时候开通有个条件

    我们必须按照要求改变自己小程序的付费方式,把我们的付费方式改成按量付费即可。

    这里不用担心,这里的按量付费,每月都有免费额度。这些额度我们开发学习基本上够用了


    这个时候我们的静态网站功能就开通成功了。

    开通成功以后如下图。

    3,编写发送短信的云函数

    其实上面静态网站功能开通以后,我们不用上传网站资源,就可以直接来使用短信功能了。
    下面我们就来使用云开发的云函数功能来做短信发送功能。
    老规矩先看效果图

    代码编写也很简单

    其实发送短信的代码很简单,就上面这几行。下面就来教大家如何编写这个云函数。

    3-1,初始化云开发环境id

    新建一个和pages平级的目录cloud,用于存放云函数

    然后在project.config.json里添加cloudfunctionRoot选项。

    然后对cloud选择当前环境

    在app.js里配置环境变量

    这个env环境id需要你去云开发控制台获取

    3-2,创建云函数

    右键cloud目录,新建Node.js云函数

    然后新建一个云函数,名字你可以自定随便定。我这里用sendSms

    3-3,编写云函数


    我这里把代码贴给大家,记得把env和接收短信的手机号换成你自己的。

    const cloud = require('wx-server-sdk')
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV
    })
    exports.main = async (event, context) => {
      try {
        const result = await cloud.openapi.cloudbase.sendSms({
          env: 'xiaoshitou-zfl2q',
          content: '编程小石头发布了新的能力',
          phoneNumberList: [
            "+8615611823564"
          ]
        })
        return result
      } catch (err) {
        return err
      }
    }
    

    3-4,部署云函数

    上面云函数编写好了,一定要记得部署下云函数。右键sendSms然后点击下面箭头所示的即可。

    上传部署成功后,会有下面这样的提示

    4,调用云函数发送短信

    我们上面云函数编写并部署成功以后,就可以来调用这个云函数,发送短信了。

    4-1,编写wxml文件

    在wxml文件里写一个button按钮,编写一个bindtap点击事件

    4-2,编写js文件

    在js文件里实现上面button的点击事件,然后调用云函数

    调用云函数时,一定要记得这里的name必须和你的云函数名一模一样。

    4-3,点击发送短信

    点击发送短信

    点击发送 短信以后,可以看到日志里打印openapi.cloudbase.sendSms:ok
    这就代表发送成功了。
    然后再看下手机,收到下面的短信。

    到这里我们的短信发送功能就完整的实现了。
    其实到这里该实现的功能,就已经实现了。但是我们使用短信场景更多的是用短信发送验证码。所以接下来给大家做一个发送短信验证码的例子出来

    5,发送验证码短信

    老规矩,先看效果图

    我们只需要获取用户输入的手机号,然后点击获取验证码,最后输入短信里接收到的验证码,进行验证即可。

    5-1,编写wxml

    页面比较简单,就两个输入框和两个按钮

    5-2,编写js

    js里主要是获取用户输入的手机号,然后发送验证码,发送验证码调用云函数实现短信验证码发送功能。用户输入验证码以后进行校验即可。

    5-3,发送短信验证码

    用户输入手机号以后,点击发送,可以看到我们手机上收到了如下短信。


    然后用户输入获取到的验证码,点击验证。

    可以看到验证成功,验证成功以后后面的操作就可以自己定了,比如验证成功以后跳转到登录成功页。

    到这里我们就实现了验证码发送功能了。

    5-4,生成随机验证码的方法

    我这里把生成随机验证码的方法贴给大家。

    字母和数字混合

      //获取随机验证码,n代表几位
      generateMixed(n) {
        let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
        let res = "";
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35);
          res += chars[id];
        }
        return res;
      }
    

    数字混合

      //获取随机验证码,n代表几位
      generateMixed(n) {
        let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
        let res = "";
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 9);
          res += chars[id];
        }
        return res;
      }
    

    实战三,群发短信

    我们上面给单个手机发送验证码的功能实现了,接下来就教大家如何群发短信。

    老规矩,先看效果图

    官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/cloudbase/cloudbase.sendSms.html

    使用云开发短信的条件

    这个前置条件很重要,条件不满足,你就没法使用云开发短信功能。

    • 1,必须是企业小程序,目前个人小程序无法使用短信发送
    • 2,必须开通静态网站功能(后面应该会逐步放开)
    • 3,必须开通云开发(这个没得说,不开通云开发你还用啥云开发功能啊)

    上面条件都满足以后,我们就可以来愉快的撸代码了。

    年卡福利

    • 1,可以获取石头哥目前所有视频课
    • 2,未来一年内出的新课也可以获取
    • 3,一对一问题解答,远程协助
    • 4,可以借用石头哥的企业小程序

    感兴趣可以加石头哥微♥ 2501902696 备注年卡

    1,编写wxml页面

    简单起见,我这里只定义一个输入手机号的输入框和一个button按钮

    对应的代码如下
    在这里插入图片描述

    2,获取用户输入的手机号

    我这里以*来分割手机号,如下图所示。

    然后我们定义一个bindinput事件来获取用户输入的内容。

    可以看到,我们成功的获取到了用户输入的手机号了。

    但是官方文档里已经说明,我们群发短信的时候需要用到的是一组手机号,也就是说需要用数组来存放数据。但是我们这里是一个字符串。那么我们就要分割字符串成数组了。

    3,分割字符串成数组

    我们分割字符串用到的是字符串的split()方法

    当然触发的时机,应该是在用户点击群发按钮的时候。那么我们就为群发按钮定义bindtap点击事件send

    可以看到我们成功的把字符串分割成了数组。

    但是我们数组里的手机号前面有个回车键,所以安全起见,我们在分割字符串之前,需要先把这回车键给剔除掉。

    4,去除字符串里的回车键

    去除字符串里的回车键语法如下

    字符串.replace(/[\r\n]/g, "")
    

    可以看到我们只需要调用字符串.replace方法即可,后面括号里跟的是回车键对应的正则表达式。这里不需要记住,后面用的时候来我笔记这里复制就行了。

    可以看到我们剔除回车键以后,再分割的字符串里就没有回车键了。

    5,遍历数组给手机号前面+86

    如果你有仔细阅读官方文档,可以看到我们群发的手机号前面必须以+86开头。并且每次群发的手机号不能超过1000条。

    那么我们接下来就要遍历数组,给每个手机号前面都添加‘+86’了。
    当然了这里有很多种方法来实现这一目的,我这里用一个for循环和一个map方法来分别实现下。

    可以看出用map方法更简介一点。但是对于新手来说第二种方法可能不是很好理解。所以这里你用那种方法都可以,不做强制要求。

    5-1,通过for循环来实现

    5-2,通过map方法来实现

    6,编写群发短信的内容

    那么我们接下来要做的就是实现群发功能了。我们这里要想成功的实现群发,需要两个元素

    • 要群发的短信内容
    • 要群发的手机号

    关于手机号和群发内容都有要求

    我们群发手机号这里已经符合要求了,接下来就是群发的内容了。群发内容最长不能超过60个字节,一个汉字通常2~3个字节。也就是说我们短信内容不能超过20个字,所以群发的短信一定要精细。用最少的字来吸引用户。

    这里其实就是一个input来获取用户输入的内容就行了。我不再多讲,直接把代码贴出来。

    在js里获取用户输入的短信内容

    现在完事具备,只欠一个云函数了

    7,编写群发短信的云函数

    短信内容和群发的手机号都已经成功拿到了,我们接下来就要来编写群发的云函数了。

    云函数其实我们短信验证码那一节基本上一样,区别就是

    • 短信验证传入的是:验证码+单个手机号
    • 群发传入的是:短信内容+多个手机号

    云函数编辑好,记得重新部署下。

    8,调用云函数实现群发

    上面云函数编辑好了,也部署好了,接下来就是要调用云函数实现短信群发了。

    调用其实很简单。

    9,群发演示失败

    接下来我们就要验证自己的劳动成果了。如下,我发这样的内容给两个手机号。为什么是两个呢,我这里是学习,要节省短信条数。官方只送我们1000条。所以要省着点用。

    其实群发两个手机号,和群发1000个没区别,只要群发两个成果,那么群发1000个也一样的。

    辛辛苦苦编写好了,测试了下,居然报错

    什么鬼,代码明明没有错误啊,程序员有时候就是莫名的自信。
    官方给的发送成果返回字段如下

    石头哥发送返回结果如下

    百思不得其解啊。不会真是代码写错了吧。。。。
    还好石头哥比较聪明,翻译了一下报错信息。

    发送时间限制,也没看到官方文档有说时间限制啊。后来又去官方文档翻来覆去,终于在一个角落里看到了这句话。

    原来是石头哥写文章太晚了。。。。

    本来想写完文章,直接录讲解视频给大家的,,,,看来只能等第二天8-22:00来续写这篇文章了。。。。

    10,群发演示成功

    终于等到了第二天8点47,下面我们把昨天的群发短信再演示一遍,看这次能不能成功。
    先来看我们的日志

    可以看出日志上显示成功的发送两个。那么收到的短信长什么样子,也给大家截个图。
    第一个手机号是安卓手机

    第二个手机号是苹果手机

    到这里我们的群发短信功能就完整的实现了。

    展开全文
  • 同学们大家好,我是小伊同学,今天我们来学习微信小程序框架。 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言,代码结构以及代码...

    同学们大家好,我是小伊同学,今天我们来学习微信小程序框架。

     

     

      微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言,代码结构以及代码的运行机制是一样。但是他们也存在一些不同之处,最直观地来看,网站页面是运行在浏览器中,微信小程序是运行在微信中。此外,微信小程序能够做到与微信紧密相融,使得在一些功能上的开发更为方便。比如获取用户身份,因为微信账号实际上已经标识了用户身份,只需要调取微信的信息就能很方便地知道用户是谁。此外还有包括手机位置信息,使用手机存储等,借助微信这一平台,小程序都能达到近乎原生APP的操作体验。

     

     

      我们要学习微信小程序的开发,首先就要来了解一下一般的前端开发是什么样的。

     

     

      前端的开发一般采用的是 HTML+ CSS + JS 这样的组合,使用了三种开发语言,那么他们都是干什么用的呢?

     

      假设做一个网站或者小程序是建造一间房子,那么html搭建了房子的骨架,通过html我们可以给房子设置一些墙、柱子和门窗。这些我们称之为组件,顾名思义,是房子的组成部件。那么在实际的前端中,这些柱子和门窗就是图片、链接、输入框和按钮等这些组成一个页面的基本元素,有了这些也就有了这个页面的框架。

     

      而CSS是用来对房间进行装修美化的,就像是把墙面涂上不同的颜色,确定好门窗的摆放位置,是一切看起来非常的赏心悦目。在实际的前端中,就是给每个页面元素加上样式,包括大小、颜色、位置、形状等等。通过css,我们的页面才有了漂亮的视觉效果。

     

      js的作用则是让门和窗户动起来,给组件添加需要的动态效果,比如对鼠标点击的响应,动态地改变展示数据等功能。

     

      通过html+css+js这三部分的配合,最终构成了一个完整的前端。那么小程序也是如此,在小程序中,html变为了wxml,css变成了wxss,这是因为在一些语法和用法上,小程序与普通的前端存在一些差别,但是他们每一部分负责的工作和他们之间的关系都没有变化,大家可以类比加以理解。

     

      同时,微信小程序的框架分为两层,分别是视图层逻辑层,框架的视图层由WXML与WXSS编写,由组件来进行展示,负责小程序的外貌;逻辑层又称为AppService,由js编写,负责小程序的行为动作。因此,我们编写的代码主要是三部分:视图层、逻辑层以及他们之间的联系互动,这一联系具体就是视图层与逻辑层之间的交互。逻辑层将数据进行处理后发送给视图层同时接收视图层的事件反馈视图层将逻辑层的数据展示到界面,同时将视图层的事件发送给逻辑层

     

     

      下面我们来看一下小程序的工程目录,在云开发创建的工程中,小程序的前端和后端代码均在一个目录下,即在小程序根目录下有四部分,cloudfunctions为云开发环境下的后端代码,竖线后为云环境的名称,比如这里的test,这部分代码主要由后端程序员编写,miniprogram为前端代码,前端需要编写的代码都放在这个文件夹里面。

     

      此外还会有一个readme自述文件和一个开发工具配置文件,这两个文件均由开发工具自动创建填写,不需要我们关注,有兴趣的同学可以自己探索,下面我们主要关注miniprogram文件夹。

     

     

      在一个小程序前端代码中,也即miniprogram文件夹下,一共有四种类型的文件,分别是:.json、.wxml、.wxss、.js。

    • json文件主要用来配置项目或者页面的属性,称为配置文件,文件内均为json格式的对象。

    • Wxml文件用来描述页面的结构,称为模板文件,代码类似html语言。

    • Wxss文件描述页面的样式,也称为样式文件,代码类似css语言。

    • js文件用来描述页面的逻辑,即处理页面和用户的交互,也称为脚本逻辑文件。这四种是小程序代码中比较核心的文件类型,

     

      此外,还可以在小程序中添加一些图片文件来美化页面,但这并不是必须的,一般来说我们使用的图片主要为.png和.jpg格式。

     

     

     

      小程序前端都放在miniprogram文件夹下,包含一个描述整体程序的app 和多个描述各自页面的page。描述整体的是以app开头的三个文件,分别为项目全局的js(全局数据和动作)、json(全局配置)和wxss(全局样式),三个文件必须放在根目录下,就是文件夹的最外层。

     

      一个pages文件夹,用于存放小程序的页面代码,该文件夹下可以有任意数量的文件夹,每个文件夹表示一个页面,文件夹名称即为页面名称,文件夹下为该页面的全部代码,使用我们刚才说的四个类型的文件来描述这个页面,且四个文件的名称必须要和页面名称相同。

     

     

     

      此外,在miniprogram文件夹下,还可能会有一个utils文件夹,其中放置的js文件用于存放公共的js代码,方便在不同页面调用。云开发环境下没有自动帮我们创建出来,我们的项目也不需要用到,因此在右边的目录下大家找不到。

     

      为了统一管理图片,我们常常手动在目录下添加images文件夹。

     

      最后,sitemap 配置文件,用来配置小程序及其页面是否允许被微信索引。

     

      好了,本小节的内容就是这些,如果大家有什么问题,欢迎在文末留言,我们明天继续哟~

     

     

    想看视频版?

    关注公号“微程序学堂”,我们的视频教程即将上线

     

    如果你自己写了好文章想投稿

    请联系我们

     

    展开全文
  • 同学们大家好,我是小伊同学,今天我们继续来学习微信小程序云开发教程。今天主要给大家讲解一下json配置部分的知识。 JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。 ...

    同学们大家好,我是小伊同学,今天我们继续来学习微信小程序云开发教程。今天主要给大家讲解一下json配置部分的知识。

     

      JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。

     

     

     

      JSON文件的内容都是一个JSON对象,被包裹在一个大括号中{},通过key-value的方式来表达数据。

     

      大家在前面的教程中已经学过了js的基本语法,那么js对象在配置文件中的区别就是这里的key是固定的,小程序框架已经指定了我们能配置哪些key,key的具体内容是什么,我们只需要查阅文档根据我们的需要填写value即可。

     

    需要注意的是:

        •JSON的Key必须包裹在一个双引号中,单引号或者其他都不可以使用

        •JSON文件中无法使用注释

     

      在微信小程序中,一共有四种json配置文件,下面按照重要程度依次给大家讲解。

     

      首先就是之前提到的全局配置,app.json中描述了当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

     

      app.json文件通常存放在根目录下,在后面的讲解中,如果没有特殊说明,根目录都前端的根目录,即对于使用云开发的小程序为miniprogram文件夹,对于不使用云开发的小程序直接就是项目根目录。

     

      pages字段用于描述当前小程序所有页面的路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。其中,第一条页面路径为首页。如果我们想把某一页设置为首页,就需要在这里第一个写该页面的路径。其次,window字段定义小程序所有页面的顶部背景颜色,文字颜色定义等。

     

     

      右图展示的就是一个最基本的小程序的app.json文件内容,我们可以在pages字段看到,这个小程序有两个页面,每一行表示一个页面,页面的路径地址和实际在工程目录中的位置对应,即:pages文件夹下的index文件夹下的index页面,第一行的这个页面也代表了首页。如果我们想要创建一个新的页面,只需要在这里加上一行,按照格式写明页面的路径及名称,重新编译运行,系统会自动为我们创建出该页面的文件夹及四个描述文件。

     

      除了全局配置,每个页面下还会有针对该页面的页面配置文件即文件名为页面名称的json文件,其中独立定义每个页面的一些属性,例如顶部颜色、是否允许下拉刷新等等。

     

     

      页面配置的json文件存放在页面文件夹中,例如“根目录/pages/index/index.json”文件描述了index页面的配置。这里就是我们之前提到的描述一个页面的四个文件之一。

     

      此外,在页面配置文件中的配置信息具有更高优先级,也就是说,如果在全局配置app.json 的 window 中和本页面配置文件中有相同的配置项,则按照页面配置中的配置执行。

     

     

      项目根目录下的project.config.json就是工具配置,是对微信开发者工具这个IDE的配置。通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等,这些配置会保存在此文件中。

     

      此外,前端根目录下还会有sitemap配置,用于配置小程序及其页面是否允许被微信索引。

     

      这两个配置文件通常由开发工具自动帮我们创建,在本教程中我们不必过多关注。

     

     

      之前我们提到在app.json文件的window字段和页面配置的json文件中都可以配置一些信息,这里给大家介绍三个常用配置项,这三个是在全局配置和页面配置中都能够使用的,当然不是所有的配置项都能在这两个文件中使用,大家可以通过开发者文档查看和学习更多内容。

     

      好了,本小节的内容就是这些,如果大家喜欢我的讲解,欢迎关注或转发分享,不要忘了点个“”支持一下哦~

     

      我们明天继续。

     

    想看视频版?

    关注公号“微程序学堂”,我们的视频教程即将上线

     

    如果你自己写了好文章想投稿

    请联系我们

     

    展开全文
  • 找到如下页面中的AppID(小程序ID),把右边的AppID(小程序ID)复制到我们第1步创建窗口中的AppID位置点击绿色按钮“新建”即可创建成功(切记不要选择小程序·云开发,应该选择不使用云服务) 3.查看小程序自动新建的...

    1.首先,我们先打开新建小程序页面如下

    在这里插入图片描述

    2.打开微信公众平台
    打开成功后点击设置进入如下页面
    在这里插入图片描述
    找到如下页面中的AppID(小程序ID),把右边的AppID(小程序ID)复制到我们第1步创建窗口中的AppID位置点击绿色按钮“新建”即可创建成功(切记不要选择小程序·云开发,应该选择不使用云服务)
    在这里插入图片描述

    3.查看小程序自动新建的页面,基本结构如下

    在这里插入图片描述
    这时候我们发现创建的文件夹中,主要包含这几个文件夹与文件。这里我简单的说明一下这里面的js,json,wxss是什么

    js:JS 简介 JavaScript 是属于 HTML 和 Web 的编程语言(tip:如果没有学过js,推荐去学习完后再来微信小程序的开发,因为主要微信小程序的开发是建立在您已经学完或者学习了解过html、css与js的内容)

    json:是一种轻量级的数据交换格式。这里我的示例项目并未使用这个文件夹,故可不用太在意,但是也尽量不要删除此类型文件,防止报错。

    wxss:类似css但不同,前期可就当作css使用。

    wxml:是微信根据xml语言衍生来的,前期可当作html语言看待。你在其他微信小程序看到的源代码中的这个文件里面的"view"现在暂时理解为html里面的div。

    4.底部可切换页面的底部导航栏
    我们随便打开一个微信小程序,会发现下面都有一排导航栏。下图以我学校食堂外卖小程序为例
    在这里插入图片描述

    5.顶部页面名字
    我们可以看到下图上面的名字,这也是我们可以设置的,后期切转的每一个页面上面的名字,可以相同,也可以不同。
    在这里插入图片描述
    6.以上就是微信小程序云开发的所需要了解的新内容了,下一篇将进入微信小程序云开发的前端页面开发。

    展开全文
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 【系】微信小程序云开发实战坚果商城-开篇

    千次阅读 多人点赞 2019-11-12 09:13:38
    什么是小程序·云开发? 为什么选择是微信小程序云开发有必要吗? 我适合学习吗?
  • 微信小程序开发【前端+后端(java)】

    万次阅读 多人点赞 2018-07-13 22:19:46
    现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
  • 微信小程序云开发[函数篇]函数安装node.js函数创建函数调用 函数 安装node.js 点击node官网,下载node.js 打开终端,输入node -v,可查看是否成功. (如果node提示不是内外部命令,请检查环境变量) 函数...
  • 同学们大家好,我是小伊同学,前面我们分别介绍了WXML和WXSS,那么今天我们一起来学习微信小程序前端三种语言的最后一种——Javascript,实际上我们在云开发中,前后端都需要使用JS,因此在第三章我们已经讲解了基本...
  • 微信小程序中,我们往往需要获取用户的身份信息,比如昵称、头像、性别、地区等。要得到这些信息,就需要我们调用获取用户信息的api了。在小程序中,微信非常重视对用户隐私的保护,因此有很多关于获取用户信息的...
  • 目录 小程序开发与传统开发模式区别? 小程序传统开发模式 小程序开发模式 区别对比 ...2019前端热词Serverless ...微信小程序开发已经成为目前最火爆的技能之一,无论是在求职、毕设、兴趣...
  • 在开发过程中,我就在想,如何与打算或者刚上手微信小程序开发的朋友实时分享心得与经验。这就是我写这个系列的初衷。但本系列不打算成为相关语言、平台、工具的基础性教程,而是着眼于如何利用新平台实现功能。因此...
  • 传统的小程序开发,获取用户openid,十分的繁琐,要进行一系列的校验及数据交换。 但是开发获取起来就十分的简单。 我们创建一个函数,取名为getOpenId,创建完成之后,我们可以发现初始的代码片段,就有返回...
  • 比如我们在进行商城类小程序开发时,用户购买了商品,商家需要收到是谁买了商品,买了什么商城,什么时候买的,收货地址是哪里等等信息。 虽然这些可以去数据库查看,但是甚为不便,而且也不能实时接收。微信小程序...
  • 微信小程序云开发体会——总结软件工程导论大作业前言第一次接触具体难题好用的技术开发完之后的体会无法不热爱更多 前言 可能大家完成这次作业都会选择比较擅长的领域——网页前后端。这的确是比较稳妥的选择,高效...
  • 我是一枚95后的大三学生,这应该是我人生第一次写博客,在写完两三个微信小程序项目之后,我也想开始写点东西,记录一下自己学习的过程、入过的坑,坑都是怎么解决的。废话少说,直入正题。 ...
  • 微信小程序主要开发语言

    千次阅读 2019-05-25 14:08:00
    小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。 在大部分开发者看来,ECMAScript和JavaScript表达的是同一种含义,但是严格的说,两者的意义是...
  • 微信小程序云开发入门(摆脱后台自己实现后台数据) 多个小程序开发经验,带领大...
  • 一、小程序原生-函数 1、在项目根目录下新建函数存放的文件夹目录: "functions/",并在project.config.json 中加入配置 2、右击functions 文件夹选择当前环境,环境选择好后,再右击选择:新建Node.js...
  • Html的全称为HyperTextMarkup Language,翻译过来就是超文本标记语言,这种语言目前已经普遍用于前端开发,而wxml正是从html演变而来,它基于微信这个平台,在很多方面变得更加简洁易用,更加适合微信小程序开发。...
  • 一、XpmJS 是啥XpmJS可以链接任何云端资源,为小程序、移动应用提供资源通道和后端能力。降低开发门槛,提升小程序开发效率。无需编写后端代码,即可实现用户登录、WebSocket 通信、微信支付、云端数据表格、文 ...
  • 小程序开发入门 学习技术不要光看视频、教材,一定要动手实践。只有实战,技术才会变得简单。小程序相比其他编程语言来说,可以让我们更快做出一些技术产品。 开始前的准备 小程序的开发有两样东西必不可少,一个...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 订阅消息是小程序一个比较重要的功能,这也是与你客户...二、在小程序端授权并调用函数 第一步,函数的编写很简单,给你个模板直接往里套内容。 const cloud = require('wx-server-sdk') cloud.init() exports.main
  • 0基础入门微信小程序开发 理解微信小程序的开发流程 理解小程序开发的使用 独立完成小程序全栈开发 学习内容 基础内容–>注册申请–>开发工具 代码构成–>JSON–>WXML–>WXSS–>JS 开发–&...
  • 【系】微信小程序云开发实战坚果商城-开篇 基础篇 【系】微信小程序云开发实战坚果商城-弹性盒子 【系】微信小程序云开发实战坚果商城-ES6 简单入门 【系】微信小程序云开发实战坚果商城-官方案例先...
  • 本小节我们将学习函数,无论是接收前端的网络请求、还是操作数据库,都需要使用函数。 我们首先学习函数的格式。 看右边的代码,这是一个函数,...那么函数的开发步骤是怎样的呢? 第一步,我们需...
  • 微信小程序云开发的笔记 微信小程序 1.什么是微信小程序? 微信之父—“张小龙”,小程序是一种不需要下载安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走...
  • 因为很早就对小程序云开发有所耳闻,于是这次的小程序就简单的使用了下,整体感觉是很香!相比我之前写小程序,我需要购买一台服务器,为它配置域名,还要搞https证书,服务器还需要部署,部署后得懂php(我学的后端...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,423
精华内容 24,569
关键字:

微信小程序云开发语言

微信小程序 订阅