微信小程序
文章平均质量分 59
微信小程序
今天多喝热水
记录自己的个人笔记
展开
-
rich-text 富文本标签
rich-text 富文本标签标签字符串对象数组rich-text 富文本标签。它可以将字符串解析成 对应标签,类似 vue中 v–html 功能标签字符串对象数组.js文件Page({ data: { //标签字符串 jsp:'<div class="dic_class"><h1>Title</h1><p class="p">Lise is <i>like</i>&a原创 2021-03-31 17:50:03 · 1078 阅读 · 0 评论 -
全局配置文件(tabBar标签)
导航栏设置一级目录一级目录原创 2021-03-24 19:29:22 · 516 阅读 · 0 评论 -
微信小程序云开发-云函数
微信小程序云开发-云函数新建云函数使用云函数云函数传值与调用新建云函数用微信开发者开发小程序的时候,选择云开发创建的项目,都有两个主文件夹。一个【cloudfunctions】存放云函数,一个【miniprogram】存放小程序文件的。下图中就有我新建的两个云函数,选中【cloudfunctions】,右击选择【新建Node.js云函数】,命名之后文件夹之下就自动生成三个文件 config.json,index.js,package.json。使用云函数在index.js文件写入代码:// 云原创 2021-04-19 14:48:34 · 1099 阅读 · 0 评论 -
选择框
选择框radio-单选框checkbox-复选框radio-单选框radio标签 必须要和 父元素radio-group来使用value: 选中的单选框的值color: 修改颜色demo.js 文件代码Page({ data: { sex:"" }, handleChange(e){ console.log(e); //获取单选框中的值 let a=e.detail.value; //把值赋值给 data 中的数据 this.set原创 2021-04-01 18:08:21 · 136 阅读 · 0 评论 -
获取地址的代码优化
获取地址的代码优化获取地址的优化处理utils里的asyncWx.js获取地址的优化处理未优化前的代码://收货地址 handleChooseAddress(){ wx.getSetting({ success: (result) => { // 属性名怪异的时候 都要使用[]形式来获取属性值 const scopeAddress =result.authSetting["scope.address"]; if (scope原创 2021-04-09 14:23:49 · 116 阅读 · 0 评论 -
样式
样式demo.wxml文件(配置文件,html)<view> rpx</view>demo.wxss文件(样式文件,css)/* pages/demo/demo.wxss *//* 1 小程序中 不需要主动引入样式文件(创建时已经自动生成4个相应的文件,因为名字都一样,小程序能自动设别)页面中的某些元素单位 需要把px换成 rpxpx 固定了大小,机型(屏幕大小)改变,原有大小不变rpx 不固定大小,机型(屏幕大小)改变,能等比例缩放,也就是能进行页面适配原创 2021-03-26 22:11:16 · 402 阅读 · 0 评论 -
icon 图标
icon 图标属性类型默认值必填说明typestring是icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizenumber/string23否icon的大小colorstring否icon的颜色,同css的color.js 文件Page({ data: { iconSize: [20原创 2021-03-31 20:50:45 · 1010 阅读 · 0 评论 -
微信小程序逆地址解析
微信小程序逆地址解析逆地址解析解析效果三级目录逆地址解析wx.getLocation获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html<button bindtap="getAddr原创 2021-04-18 23:45:37 · 990 阅读 · 1 评论 -
使用VS Code开发微信小程序
使用VS Code开发微信小程序微信开发工具结构缺点VS CodeVS Code 下载插件Chinese小程序开发助手Easy lessminappvscode wxmlwechat-snippet中文乱码处理配置Easy less说明微信开发工具说归说,但是开发微信小程序的时候,这个微信开发工具还是离不开的。VS Code在我看来就是一个敲代码的记事本,编译运行还得靠其他软件。但它的作用是让使用者更舒适的编写代码,而且插件安装方便,使用起来还是很香的。结构缺点编写时代码提示少,很多代码靠手打原创 2021-04-05 18:58:56 · 28748 阅读 · 7 评论 -
小程序云开发-存储
小程序云开发-存储上传文件删除文件下载文件上传文件在微信开发者工具中,点击【云开发】,进入云开发控制台,选中【存储】第一种,简单方便的。直接从文件管理器将要上传的文件夹拖入控制台即可上传,支持拖入多个文件或文件夹。第二种,点击【上传文件】,在文件管理器中选择需要上传的文件。第三种,用小程序的代码来实现。点击button按钮之后,触发事件。事件第一步是调用小程序内置的 chooseImage 方法,作用是上传本地图片,返回一个小程序临时文件路径。第二步调用 wx.cloud.uploadFil原创 2021-04-19 09:40:35 · 761 阅读 · 0 评论 -
微信小程序开发工具
准备开发环境进入微信公众平台注册账号登录查看APPID下载工具进入微信公众平台微信公众平台:https://mp.weixin.qq.com/?token=&lang=zh_CN或者进入微信官网:点击【公众平台】注册账号注册账号:https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN如果有账号可以直接登录:登录查看APPID下载工具下载链接:https://develo原创 2021-03-24 15:10:04 · 149 阅读 · 0 评论 -
微信小程序-获取用户地址
微信小程序-获取用户地址getLocationchooseLocation代码部分显示效果补充getLocation获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02。属性类型说明latitudenumber纬度,范围为 -90~90,负数表示南纬longitudenumber经度,范围为 -180~180,负数表示西原创 2021-04-18 23:23:24 · 454 阅读 · 2 评论 -
第一个微信小程序
第一个微信小程序1、打开微信开发者⼯具2、新建⼩程序项目3、填写项目信息4、第一个小程序5、开发者工具介绍1、打开微信开发者⼯具注意 第⼀次登录的时候 需要扫码登录2、新建⼩程序项目3、填写项目信息如何查看自己的AppID:https://blog.csdn.net/qq_55342245/article/details/1151767584、第一个小程序项目信息填写完成之后,点击【新建】按钮即可生成第一个小程序5、开发者工具介绍区域可以按照自己编程习惯进行适当修改。详情可查阅原创 2021-03-27 14:48:54 · 252 阅读 · 0 评论 -
自定义组件
自定义组件创建自定义组件使用自定义组件三级目录创建自定义组件类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成先新建两个文件夹:第一个空白处右击新建文件夹【component】,第二个选中【component】文件夹,再新建一个文件夹【Tabs】。选中刚刚新建的【Tabs】文件夹,右击选择【新建Conponent】,命名完成后便能生成四个同名文件。使用自定义组件例如:demo 这个文件要使用,要先在json文件中声明。demo.json 文件代码:“标签名“:“原创 2021-04-03 15:01:26 · 1011 阅读 · 0 评论 -
链接标签 navigator
链接标签 navigator导航组件 navigator。跟HTML的a标签类似navigator是块级元素 默认会换行 可以增加宽度和高度url 要跳转的页面路径,绝对路径或相对路径target 要跳转到当前的小程序,还是其他的小程序页面open-type 跳转方式navigate 默认值 保留当前页面(有返回按钮,可以返回),跳转到应用内的某个页面,但是不能跳到tabbar页面redirect 关闭当前⻚⾯(无返回按钮,不能返回),跳转到应⽤内的某个⻚⾯,但是不允许跳转到原创 2021-03-31 15:31:59 · 373 阅读 · 0 评论 -
小程序获取用户信息
小程序获取用户信息getUserInfo 方法wx.getUserProfile 接口getUserInfo 方法demo.wxml代码:<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>demo.js文件代码:Page({ data: {}, onLoad: function() { }, bindGetUserInfo (e) {原创 2021-04-11 20:57:50 · 146 阅读 · 0 评论 -
Button 按钮
Button 按钮Button-外观样式Button-开放能力Button-外观样式以下都是编译器自带的,也可以自己用CSS设计size: 按钮的⼤⼩type: 按钮的样式类型plain: 按钮是否镂空,背景⾊透明disabled: 是否禁⽤loading: 名称前是否带 loading 图标form- type: ⽤于 组件,点击分别会触发 组件的 submit/reset 事件open- type: 微信开放能⼒<button>默认按钮</butto原创 2021-03-31 20:16:09 · 970 阅读 · 0 评论 -
原生请求与Promise方法
原生请求与Promise方法原生请求Promise方法共用的wxml页面:原生请求使用请求,并且使用返回值的页面的js文件data: { // 轮播图数组 swiperList:[] }, // 页面开始加载就会触发 onLoad: function (options) { // 发送异步请求获取轮播图数据 wx.request({ url: 'https://api-hmugo-web.itheima.net/api/public/v1/home原创 2021-04-05 15:18:38 · 255 阅读 · 0 评论 -
事件绑定
事件绑定demo.js文件(逻辑文件,Javascript)Page({ /** * 页面的初始数据 */ data: { num:120 }, handleInput(e){ console.log(e.detail.value); this.setData({ num:e.detail.value }) }, handletap(e){ //console.log(e); // 获取自定义属性 opera原创 2021-03-24 23:02:37 · 88 阅读 · 0 评论 -
微信小程序的中大图预览
微信小程序的中大图预览遇到的问题previewImage语法对数组中的数据进行筛选解析遇到的问题点击轮播图,预览图片。但是提供的参数不满足。微信小程序提供了方法, wx.previewImage 。可在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。官网文档previewImage语法wx.previewImage({current, // 当前显示图片的http链接urls // 需要预览的图片http链接列表,这个是数组});对数组中的数据进行筛选js中原创 2021-05-20 15:53:55 · 558 阅读 · 1 评论 -
条件渲染
条件渲染条件渲染wx:if="{{true/false}}"we:if wx:elif wx:elsehidden="{{true/false}}使用条件当标签不是很频繁的切换显示 优先使用 wx:if直接把标签从页面结构中移除掉(多次添加移除会损坏性能)当标签频繁的切换显示的时候 优先使用 hidden通过添加样式的方式来切换显示 (display:none),所以 hidden属性不要和样式 display一起使用<view> <view原创 2021-03-24 21:50:23 · 79 阅读 · 0 评论 -
制作轮播图
制作轮播图swiper 标签滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。轮播图外层容器 swiper每一个轮播图 swiper-itemswiper标签 默认样式 wigth:100% height:150pximage 默认320*240autoplay 是否⾃动切换 默认5000msinterval ⾃动切换时间间隔circular 是否循环轮播duration 滑动动画时长 默认500msindicator-dots 是否显⽰⾯板指⽰点in原创 2021-03-27 01:03:15 · 135 阅读 · 0 评论 -
优化接口-简化返回值和使用es7的async
优化接口-简化返回值和使用es7的async⼩程序中⽀持es7的async语法原先的index.js修改后的index.js进一步完善⼩程序中⽀持es7的async语法es7的 async 号称是解决回调的最终⽅案在⼩程序的开发⼯具中,勾选 es6转es5语法下载 facebook的regenerator库中的 https://github.com/facebook/regenerator/blob/5703a79746fffc152600fdcef46ba9230671025a/packages原创 2021-04-06 17:30:02 · 148 阅读 · 0 评论 -
小程序生命周期
应用生命周期一级目录二级目录三级目录一级目录小程序的入口文件App.js(也叫全局入口文件),它的最外层方法名称是:App({ })。页面的js文件,最外层是Page({ })。组件的js文件最外层是Component({ })。二级目录三级目录...原创 2021-04-03 22:53:12 · 118 阅读 · 0 评论 -
微信小程序向服务器传递数据(实验篇)
遇到的问题:用SSM做后台,当微信小程序向后台传递数据时(包括对象和字符串),传递总是失败,错误报400。wx.request的请求语法也是没有问题的,但是后台不识别。所以我新建了一个【servlet】,在doGet方法里写内容。因为wx.request的请求默认是GET方法。也可以改成POST,那么就在【servlet】的doPost方法体里写代码。以下是两个简单的小实验。传递对象:微信页面:test(){ var goods={}; goods.goodsId="2020002原创 2021-05-19 21:59:37 · 2619 阅读 · 0 评论 -
微信小程序,使用正则表达式,快速验证是否是数字
微信小程序中,使用正则表达式,快速验证是否是数字一级目录二级目录三级目录一级目录if (this.data.goodsNum == '' || this.data.goodsNum == undefined) { app.wxTips("商品数量不能为空!") }else if (!(/(^[0-9]*$)/.test(this.data.goodsNum))) { app.wxTips("商品数量只能输入数字!") }验证数字的正则表达式集验证数字:1$转载 2021-07-11 21:01:49 · 1663 阅读 · 0 评论 -
小程序云开发-数据库
小程序云开发-云数据库新建数据库对云数据库的操作查询增加修改删除三级目录新建数据库在微信开发者工具中,点击工具栏中的【云开发】,进入云开发控制台在云开发控制台中点击【数据库】点击左侧的【+】,添加集合。这里相当于数据中的一个表选中刚才新建的集合,点击【+ 添加记录】,写入数据即可,一个集合可以添加多个记录。这里相当于往表中插入数据。id 可以选择系统自动生成,自己命名也可以。对云数据库的操作查询//index.js// 在开始使用数据库API进行操作之间,需要先获取数据库的应用原创 2021-04-19 09:04:14 · 1448 阅读 · 2 评论