
小程序(基础+实战)
文章平均质量分 50
该专栏包含学习小程序过程中的重要要点以及实战项目。
宋建国
接下来要更新的内容有:Flask全栈知识
展开
-
小程序开发基础12--小程序常用正则及使用方法
手机号:if (!(/^1[345768]\d{9}$/.test(e.detail.value.phone))) { wx.showToast({ title: '手机号码有误', duration: 2000, icon:'none' }); return false; }邮箱:if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(that.data.Emlia))){ wx.show原创 2021-11-04 10:50:11 · 743 阅读 · 0 评论 -
小程序开发基础13--小程序单选框(radio)/复选框(checkbox)的功能使用
效果展示功能代码前端页面*******************单选框测试***************<radio-group bindchange="danxuankuang1"> <radio value="单选框选择1"> 单选框选择1</radio> <radio value="单选框选择2"> 单选框选择2</radio></radio-group><view> 您选择的是{{daxuan原创 2021-11-04 11:27:53 · 836 阅读 · 6 评论 -
云开发学习9--用户注册,登录,退出的整体功能流程介绍
业务流程1.进入小程序到登录/注册界面2.用户未注册时进入注册界面进行用户注册,注册完成后自动跳转至登录界面(符合常见业务流程)3.用户成功登录后进入个人中心页(此部分涉及用户信息的本地缓存与获取)一,用户信息数据库结构别忘记更改数据集合权限二,整体代码1.登录/注册、个人中心页me.wxml<!-- 未登录 --><view wx:if="{{!loginOK}}"> <button type="primary" class="zuc原创 2021-11-03 08:57:59 · 643 阅读 · 0 评论 -
云开发学习8--用户订阅消息推送(用于类似订阅课程到时上课提前提醒)
实现流程1.通过原生云函数的默认函数获取用户openid2.获取用户授权,获取一次授权就可以发送一次订阅消息,所以多引导用户多点击订阅消息授权。3.实现发送订阅给单个授权用户4.实现发送订阅给多个授权用户一,获取用户openid原生云函数内容// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV})// 云函数入口函数exports.mai原创 2021-11-03 08:40:04 · 457 阅读 · 0 评论 -
云开发实战实战3--图片证件识别应用(代码资源后续上传)
实现项目展示本文需要调用小程序接口中的OCR接口,具体接口使用请查看文档。文章直通车识别证件的选择栏首页(例)点击识别印刷体,然后选择好要识别的文本数据上传识别后的结果就会对象的数据类型形式返回,可以通过其他操作利用数据,在这里仅对所有识别结果进行展示。具体可返回数据看文件。注1:在进行本项目前,请确保您的小程序已经购买了OCR识别服务(免费额度为:100次/天),购买地址:https://developers.weixin.qq.com/community/service原创 2021-11-01 17:05:26 · 900 阅读 · 1 评论 -
云开发实战实战2--云相册应用(代码已上传资源)
实战项目展示需要用户授权登录来获取用户名(暂时没有获取其他信息,如有需要自己在后续denglu页面中进行设置)登录成功后进入云相册界面。点击右下角可上传图片(暂时设置为只能同时上传一张),其他用户上传的图片也可显示并带有用户名。点击图片可显示大图,用来保存转发等。项目代码(复制可用,需配置云数据库和云存储)1.云数据库数据存储格式2.云存储格式图标资源放页面中的图标数据,大家可以自己更换自己喜欢的图标上传图片为用户上传到云相册的图片3.部分代码展示(整个项目代码已上传原创 2021-11-01 10:01:56 · 400 阅读 · 1 评论 -
小程序开发基础11--navigator页面跳转,小程序跳转
1.认识两种页面跳转方式我们在小程序里做页面跳转有两种方式1,借助navigator组件2,借助wx.自带方法,在点击的时候做页面跳转如下图所示的几个wx.方法官网给出的路由解释2. navigator 组件实现页面跳转navigator其实和我们html里的a标签有点像,也是为了实现页面跳转的。官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html文档直通车我们想用navig原创 2021-10-29 12:03:15 · 8492 阅读 · 1 评论 -
小程序开发基础10--tabbar底部多选择页面组件(小程序底部导航栏)
1.认识组件官方文档:(选择tabBar查看)https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9文档直通车,选择TabBar一个小程序可以配置2-5个多页面,我们这里以创建3个页面来给大家做下讲解。2.创建资源目录,存放图标数据创建image目录将下载好的图标文件传入到image文件夹中3.创建多个页面,并原创 2021-10-29 10:42:57 · 745 阅读 · 0 评论 -
小程序开发基础9--swiper轮播组件
1,认识轮播图组件我们在小程序里实现顶部轮播图来动态的显示一些热门商品,这个时候就要用到swiper组件了。官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html文档直通车如下图,就是我们传说中的顶部轮播图。swiper必须结合swiper-item来使用。2.swiper-item组件我们的swiper-item就是用来装每个轮播图使用的。下面我写一个简单的例子来看下我这里先在swip原创 2021-10-29 10:19:51 · 1467 阅读 · 0 评论 -
小程序开发基础8--授权登录退出和缓存(可当做基本登录推出控件在项目中使用)
一,知识部分1,认识wx.getUserProfile方法对应的文档:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html文档直通车使用这个方法可以获取如下的用户信息2. 授权登录及前端美化2.1 授权登录一般我的使用上面的wx.getUserProfile方法获取用户信息时,需要用户授权的。一般授权弹窗如下。只有用户点击允许以后才可以获取用户信息。原创 2021-10-29 09:31:58 · 349 阅读 · 0 评论 -
小程序开发基础7--图片控件、视频控件学习
一,image组件image组件:主要用来显示图片,可以是本地图片,也可以是网络图片。官方学习文档:https://developers.weixin.qq.com/miniprogram/dev/component/image.html文档直通车当我们不给image设置宽高时,image组件的默认宽度是320px,高度240px。1. image组件图片显示我们通过src属性来设置要显示的图片资源,图片资源有两种本地图片资源网络图片资源我们设置显示图片的语法如下<image s原创 2021-10-29 09:10:23 · 476 阅读 · 0 评论 -
小程序开发基础6--对象的创建、内置对象Array的使用
一,对象的三种创建方式利用字面量创建对象利用new Object创建对象利用构造函数创建对象1.利用字面量创建对象语法如下var 对象名={属性名:属性值,属性名:属性值,方法名:function(){}}var Person = { name:'小香猪', age:18, code:function(){console.log('小香猪会写代码')}}2.利用new Object创建对象语法:var obj = new Object();obj.name=‘编程原创 2021-10-29 08:51:43 · 1369 阅读 · 0 评论 -
小程序开发基础5--ES6(小程序)中var/let/const的区别
ES6(小程序)中var/let/const的区别let: * 声明的变量只在它所在的代码块有效; * 需要先声明然后再使用,否则报错 * let声明的变量是局部变量,该变量只会在最靠近{ }内的范围有效,出了{}之后,该变量就不能用了,否则会报该变量未定义的错误。 * for循环的计数器,就很合适使用let命令。 * let不允许在相同作用域内,重复声明同一个变量。var: * 声明的变量在全局范围内都有效; * var定义的变量可以修改,如果不初始化会输出unde原创 2021-10-28 16:28:18 · 344 阅读 · 0 评论 -
小程序开发基础4--字符串类型转换、对比、拼接。
一,字符串与数字类型数据的转换1.数字数据转换为字符串num.toString()String(num)" " + num2.字符串类型转化为数字类型Number( “3.14” ) ----->3.14parseFloat( “3.14” ) ------>3.14parseInt( “3.14” ) ------->3二,等号对比字符串使用 “==” 号进行对比时:仅判断内容是否相同字符串使用 “===” 号进行对比时,判断数据类型+内容是否相同三原创 2021-10-28 16:20:42 · 1879 阅读 · 0 评论 -
云开发实战1--实现简单的文章点赞收藏+文章动态评论功能(无前端美化)
一,分块功能代码展示1.三元运算符实现点赞、收藏状态转换 this.setData({//将对应的状态图标进行转换 imgUrl: souchang ? "../../images/shoucang-no.png" : "../../images/shoucang-yes.png" }) souchang = !souchang //转换状态标志的布尔值2.主界面携带数据跳转至详情页前端数据传输至主界面js<view class="itemRoot" bindta原创 2021-10-28 14:11:30 · 975 阅读 · 0 评论 -
小程序开发基础3--小程序的数据类型及类型检测方法
一,小程序的常用数据类型数据类型讲解官方文档1.官方给出的所有数据类型2.常用数据类型null和Underfined在数值上相等,但是类型不同。3.数据类型测试原创 2021-10-26 21:18:35 · 993 阅读 · 0 评论 -
小程序开发基础2--小程序中函数的两种创建方式
1.第一种定义方式,简写版(推荐使用这种)hanshu1(){ console.log("第一种函数定义方式,简写版")},2.第二种定义方式,官方版hanshu2:function(){ console.log("第二种函数定义方式,官方版")},3.函数调用方式//函数调用方式this.hanshu1()this.hanshu2()...原创 2021-10-26 21:02:58 · 224 阅读 · 0 评论 -
小程序开发基础1--小程序的三种注释形式
1.wxml文件中的注释形式<!-- -->2.wxss文件中的注释形式/* */3.js文件中的注释形式// /* */原创 2021-10-26 20:55:17 · 760 阅读 · 0 评论 -
云开发学习7--基础综合案例(无页面优化的简单商城小程序,以实现功能为主)
一,基础知识部分1.更改小程序上方标语修改json文件(对应界面,若在app.json中则所有页面都应用) "navigationBarTitleText": "小香猪商城",2.两种弹窗方法应用(showToast、showModal)wx.showToast函数文档 wx.showToast({ icon: "none",//不带就是一个对号 title: '商品名为空,请重新输入', })wx.showModal函数文档3原创 2021-10-26 16:58:53 · 267 阅读 · 0 评论 -
云开发学习5--页面下拉刷新
1.开启下拉刷新设置(Json文件中) "enablePullDownRefresh": true, 2.在js文件中找到下拉刷新事件函数,进行下拉刷新功能编写 //监听用户下拉动作 onPullDownRefresh: function () { console.log('下拉刷新的监听') //自带刷新动画 this.getList()//更新前端页面 }3.启动、结束刷新动画启动刷新动画 wx.startPullDownRefresh() //启原创 2021-10-26 08:48:45 · 264 阅读 · 0 评论 -
云开发学习6--wx:for使用时报黄问题
当使用wx:for会出现以下报黄问题解决方法也很简单在前端组件内添加 wx:key=“index” 即可:原创 2021-10-25 17:46:07 · 166 阅读 · 0 评论 -
云开发学习4--分页加载
一,使用同名函数来简化代码前端代码<button bindtap="getData" data-page="1">加载第一页</button><button bindtap="getData" data-page="2">加载第二页</button><button bindtap="getData" data-page="3">加载第三页</button>后端代码调用方式 getData(e) { // cons原创 2021-10-25 17:42:17 · 265 阅读 · 0 评论 -
云开发学习3--云存储
概念:云存储是小程序用来存储需要用到的视频,音频,图片的一个云端存储空间。一,图片的上传步骤一:图片上传选择文档 chooseImg() { wx.chooseImage({ count: 1,//最多选择多少张图 sizeType: ["original", "compressed"],//设置图片原图或者压缩 sourceType: ["album", "camera"],//设置上传图片来源 success: res => {原创 2021-10-25 17:07:02 · 655 阅读 · 0 评论 -
云开发学习2--数据库的高级操作
一,快捷键对应文档常用快捷键二,数据排序orderBy()对应文档 wx.cloud.database().collection("goods") .orderBy("price", "desc")//给出根据数据的哪个属性来进行数据排序,并给出排序方式:asc升序,desc降序 .get() .then(res => { this.setData({ list: res.data //将排序后的数据通过数据绑原创 2021-10-25 16:10:15 · 286 阅读 · 0 评论 -
云开发学习1--数据库的增删改查
一,数据查询1.当需要对数据库中数据进行操作时,需要首先注意将数据库的访问权限进行更改。2.get()查询数据库数据本地查询方式 getList() { wx.cloud.database().collection("goods")//在collection中设置数据库集合的名称 .get() .then(res => { // console.log("商品列表请求成功", res) this.setData({原创 2021-10-25 15:41:48 · 556 阅读 · 0 评论