微信小程序
文章平均质量分 52
wy313622821
这个作者很懒,什么都没留下…
展开
-
微信小程序——分包
分包官方分包地址:使用分包 | 微信开放文档分包为packageA,项目结构如下:关键代码:"subpackages":[{"root":"packageA","pages":["pages/shopping/shopping"]}],示例项目代码下载地址为:微信小程序中的分包的功能-小程序文档类资源-CSDN下载微信小程序官方实例:https://res.wx....原创 2022-02-08 17:06:35 · 316 阅读 · 0 评论 -
微信小程序——绝对路径、相对路径、返回到某个页面
1、绝对路径、相对路径“./”:代表目前所在的路径"../":代表上一层路径“/”开头,代码根目录(绝对路径)绝对路径可以在登录过滤中使用,token过期后跳转到登录页面2、返回到某个页面/** * 关闭到某个页面 */ goback(pageRoute ) { let index getCurrentPages().find((pageItem, routeIndex) => { if (pageItem.route == pag原创 2021-07-26 10:17:49 · 2748 阅读 · 0 评论 -
微信小程序——抽屉(左侧菜单)
效果图:封装好的左侧抽屉组件,需要的同学可以到这里拿:https://download.csdn.net/download/wy313622821/20278190原创 2021-07-14 19:06:16 · 2986 阅读 · 0 评论 -
微信小程序——类
类bleSdk.jsclass bleSdk { constructor(name) { console.log("只要new生成实例时,就会自动调用这个函数constructor",name) this.data = { a: name, b:{} } } fangfa1() { console.log("输出111", this.data.a) } fangfa2() { console.log("输出222",原创 2021-06-17 17:42:37 · 300 阅读 · 0 评论 -
微信小程序——{}对象(增删改、合并)
在页面data的对象: obj: { name: "张三", age: '18' }1、对象增加某个字段this.data.obj.sex="男"//或者如下 this.setData({ ['obj.sex']:"男" })输出:{name: “张三”, age: “18”, sex: “男”}2、对象删除某个字段delete this.data.obj.age输出:{name: “张三”}const {age,...obj1}原创 2021-06-16 16:01:29 · 1629 阅读 · 0 评论 -
微信小程序——监听全局变量改变则运行某个方法、A页面触发B页面的某个方法(非页面栈)、组件(observers监听某个值的变化)
监听某个值的变化 observers: { 'typeList': function(typeList) { // 在 typeList被设置时,执行这个函数 // console.log("typeList有改变触发------------>",typeList) } },放在与 methods方法同级的位置...原创 2021-05-26 20:15:43 · 3034 阅读 · 0 评论 -
微信小程序——减少使用if和else(运算符、switch、map、函数代理、多态)、动态方法
复杂判断这样写更优雅通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂。有没有更好的办法来解决呢?下面为你揭晓答案:1、三元运算符a=='1' ? '2' : '5'2、使用swith/** * 按钮点击事件 * @param {number} status 活动状态:1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButto原创 2021-05-23 13:36:00 · 1294 阅读 · 4 评论 -
微信小程序——css选择第一个子元素(最后一个元素)、奇偶元素、自动换行、calc百分比数减去固定像素
1、css选择第一个元素(最后一个元素)效果图:wxml代码:<view class="intro"> <view class="v1">第一个</view> <view class="v1">第二个</view> <view class="v1">第三个</view> <view class="v1">第四个</view></view>wxss代码:.in原创 2021-05-23 11:08:49 · 6913 阅读 · 3 评论 -
微信小程序之微信支付
前期准备:注意:“微信公众号”和“微信公众号|小程序”完全是两个不同的平台(本人被坑了很久才发现)。1、有微信公众号,并且公众号已经通过了微信认证(300元)2、“微信公众号|小程序” 开通了微信认证(300元),微信公众号绑定小程序,小程序里开通了微信支付3、微信公众号开通了微信商户(主要用到商户号和商户key)后台用到的参数有:小程序appid、小程序secret、商户号、商户号key。...原创 2021-05-19 10:01:33 · 176 阅读 · 0 评论 -
微信小程序——设计模式(单例,状态模式,观察者模式、代理模式、策略模式【表单验证】)
1、单例// 单例var mySingleCase = function () { // 私有变量和方法 var attribute = "我是‘私有’属性" function showPrivate() { console.log("我是私有方法的输出") } return { publicMethon() { // console.log("我是公共方法--调用私有方法") showPrivate() }, pu原创 2021-04-16 14:00:51 · 2943 阅读 · 0 评论 -
微信小程序——正则
1、提取大括号里面的内容 var reg = /[^\{}]*\{(.*)\}[^\}]*/; var str = "8324{aab}"; console.log("大括号的内容为:",str.replace(reg,'$1'));//输出aab2、提取字符串里的手机号码 checkPhone(text) { const phoneList=text.match(/((((13[0-9])|(15[^4])|(18[0,1,2,3,5-9])|(17[0-8])|(16原创 2021-04-13 10:28:09 · 1115 阅读 · 0 评论 -
微信小程序——在wxml中使用函数(过滤)\时间戳转日期格式
在wxml中使用函数(过滤)1、在wxml中使用时间格式转换函数:<wxs module="func"> module.exports = { format: function (value) { var d = getDate(time) return [d.getFullYear(), d.getMonth() + 1, d.getDate()].join('-') + ' ' + [d.getHours(), d.getMinutes(),原创 2021-04-12 17:28:05 · 1437 阅读 · 0 评论 -
微信小程序——weui框架、icon默认图标、Cells文字标题箭头、form表单提交
1、weui框架优势:不需要占体积同微信客户端一致的视觉效果性能比其他框架会好一点weui框架的引用:在app.json里面添加 "useExtendedLib": { "weui": true },在需要使用的页面的json上添加,例如:{ "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog", }}2、icon默认图标使用weui的框架里的图标,不需要原创 2021-04-07 14:21:32 · 3433 阅读 · 2 评论 -
微信小程序——封装组件、下拉弹窗选择列表、顶部消息提示、倒计时的modal
1、封装一个下拉弹窗选择列表组件效果图:首先新建一个component文件–dropdown-list:dropdown-list.js代码:// 下拉弹窗选择列表Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: { selectData: { type: Array, value:原创 2021-03-30 18:24:52 · 2319 阅读 · 2 评论 -
微信小程序——动画:按钮控制view中的动画(向右隐藏向左显示)、按钮动画左隐藏后恢复
效果图:wxml代码:<view class="container"> <view class="view-main" animation="{{animationData}}"></view> <button style="margin-top: 20px;" bindtap="bt_test">{{btTitle}}</button></view>js代码:// index.jsPage({ data:原创 2021-03-12 11:25:47 · 1084 阅读 · 0 评论 -
微信小程序——第二个页面给第一个页面的属性赋值,且运行第一页的方法,第二个页面传值给第一个页面
代码的结构:实现的逻辑:从第一页index跳到第二页index2,然后在第二页里给第一页属性赋值和运行第一页里面的方法common.js的代码为:// 查找目标页面export function getPageByRoute(pageRoute) { if (pageRoute.indexOf('/pages') === 0) { pageRoute = pageRoute.slice(1) } const result = { page:原创 2021-03-04 19:09:36 · 962 阅读 · 2 评论 -
微信小程序——好看的文字加输入框(文本框)
效果图:wxml代码:<view class="view-contain-ti"> <text class="text-ti">账号</text> <input class="input1"></input></view>wxss代码:.view-contain-ti { display: flex; height: 40px; margin: 20px; border: 3rpx soli原创 2021-03-02 16:05:46 · 19005 阅读 · 28 评论 -
微信小程序——防抖、节流
1、防抖防抖: 本质是延迟函数的执行。比如定义了3S的延时,即触发了这里函数之后,要等3S才执行,如果在这3S内又触发了,那就在这个点往后3S,直到这3S内不再触发才会执行这个函数用处: 多用于 input 框 输入时,显示匹配的输入内容的情况。2、节流防抖: 位时间n秒内,第一次触发函数并执行,以后 n秒内不管触发多少次,都不执行。直到下一个单位时间n秒。用处: 多用于页面scroll滚动,或者窗口resize,或者防止按钮重复点击等情况..总结:函数防抖是 n秒后延迟执行;而函数节流是立转载 2021-02-08 00:05:11 · 1934 阅读 · 2 评论 -
微信小程序——地图(定位,多个标记点)
地图(定位,多个标记点)效果图:...使用的是微信自带的腾讯地图,使用起来方便,简单,代码也很好理解喜欢的朋友请收藏.......js代码:Page({ data: { longitude: 113.14278, //地图界面中心的经度 latitude: 23.02882, //地图界面中心的纬度 markers: [ //标志点的位置 //位置0 { id: 0, iconPath: ".原创 2020-11-25 17:12:16 · 10271 阅读 · 19 评论 -
微信小程序——好看的radio单选项框,wxml里列表中遍历数组获取id传回给js页面
微信小程序——好看的radio单选项框效果图如下:.wxss代码:.view_container { display: flex; flex-direction: row; justify-content: space-around; margin-top:50rpx ; }/* 按钮未选中 */.normal_button { background: white;}/* 按钮选中 */.checked_button { background: #4原创 2020-11-21 10:02:54 · 5223 阅读 · 1 评论 -
微信小程序——漂亮的步骤条(好看)
漂亮的步骤条效果图:这里实现4个步骤,要其他步骤的可以根据代码来改,下面我们来看看代码具体是怎么实现的:.js代码Page({ data: { stepList: [{ name: '开始' }, { name: '扫描' }, { name: '付款' }, { name: '完成' }, ], stepNum: 1 //当前的步数 }, onLoad: function () {原创 2020-11-10 14:31:37 · 8193 阅读 · 13 评论 -
微信小程序——从云数据库获取数据(不使用云函数)
从云数据库获取数据(不使用云函数)//使用默认的云数据库(写在page外面)const db = wx.cloud.database()**获取数据:**条件是_id为0的数据db.collection('tuibian').where({ _id: '0' }).get({ success: function (res) { console.log('[云函数] 返回数据结果: ', res) }原创 2020-11-07 08:50:47 · 6539 阅读 · 1 评论 -
微信小程序——漂亮的分割线(分隔线)
首先来看看效果图:实战应用中,在这个小程序里运用到,感兴趣的朋友可以进去参考(界面做得还是蛮好的):实现这个功能主要分3部分组成,两个view和一个text下面来看看代码:.wxml代码<view class="view_fengexian"> <view ></view> <text class="text_fengexian">*改变线条颜色*</text> <view ></view></v原创 2020-11-03 21:31:21 · 21344 阅读 · 1 评论 -
微信小程序——wxss高级篇讲解(before,after )(.class image)(@import)(<view class=‘view1 view2‘ / >)、wxss中使用变量
大家有没有遇到这样的一种现象,在看复杂的wxss,会有很多看不懂的地方,比如:第一种:before ,after.container_1 { width: auto; margin: 30rpx; text-align: center;}.view_1 { position: relative; display: inline-block; font-size: 70rpx; color: red;}/* 在view_1控件之前 */.view_1::before原创 2020-11-03 11:21:16 · 8735 阅读 · 1 评论 -
微信小程序——蓝牙、字符串转buffer、十六进制形式的字符串转buffer
关于蓝牙这一模块,确实是有一定难度的,如果想做得好做得智能点,就必须要下一番功夫,网上给的都是讲各个功能模块,却没有一个完整的实例,下面给一个例子,功能包括:手机蓝牙的关闭和打开可以监听到手机连接和断开蓝牙设备状态的监听蓝牙的初始化,获取设备id,服务id,特征值id扫描附近的蓝牙设备,显示蓝牙名称手机与蓝牙设备的距离界面如下:蓝牙初始化/** * 初始化蓝牙(onshow调用) */ bleInit: function () { let that = this原创 2020-10-22 16:05:22 · 5637 阅读 · 0 评论 -
微信小程序——漂亮的顶部导航栏(滚动)swiper,左右滑动切换顶部选项,向上滑动tabbar吸顶并隐藏轮播图、吸顶导航栏
顶部导航栏(滚动)使用的是swiper和swiper-item来实现,左右滑动切换顶部选项,效果图如下:代码:js//index.js//获取应用实例const app = getApp()Page({ data: { tabbar: ["热门", "娱乐", "体育", "国内", "财经", "科技", "教育", "汽车"], winHeight: "", //窗口高度 currentTab: 0, //预设当前项的值 scrollLeft: 0原创 2020-10-08 11:56:49 · 8698 阅读 · 13 评论 -
微信小程序——个人中心——view在最前面——一行四个排列、边框弧度
效果图:js代码:无json代码:{ "navigationBarBackgroundColor": "#4ca1fb", "usingComponents": {}}wxml代码:<!--pages/jiaocheng/jiaocheng.wxml--><view class='container'> <!-- 第1部分 --> <view class='top-container'> <image class原创 2020-10-07 15:16:15 · 7432 阅读 · 1 评论 -
微信小程序之用户授权
用户授权今天我们来讲解微信小程序之用户授权,首先这个我们得分2种情况:1、弹出授权框用户点击允许 2、弹出授权框用户点击拒绝第一种情况: 很好处理,这里就不多做介绍,按正常的走就可以了第二种情况: 如果拒绝之后,你会发现调用了但是不会弹出给用户选择权限的对话框,这才是本篇文章的重点,方法我这里都写好了,大家按照这个去深入理解,注释都写的比较清楚了。代码如下:.......授权方法如下getLocationPermission() { return new Promise(f原创 2020-08-25 17:00:09 · 1846 阅读 · 0 评论 -
微信小程序完美解决textarea的坑(textarea替换)
完美解决textarea的坑先上效果图:解决textarea组件穿透弹窗或遮罩层:.wxss.view_contain1{ width: 96%; height: 200rpx; border: 3rpx solid #6699FF; margin: 0 2% 0 2%;}.areaInput{ width: 100%; height: 150rpx; }.textarea-counter { font-size: 24rpx; color: #9原创 2020-08-17 10:58:56 · 5975 阅读 · 2 评论 -
微信小程序之文本只显示两行多出来的用省略号表示
文本只显示两行多出来的用省略号表示效果图为:代码:.wxml<text class="text_small_1">此处三百字</text>.wxss.text_small_1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}...原创 2020-08-10 08:52:18 · 5105 阅读 · 0 评论 -
微信小程序之获取用户头像昵称信息
获取用户头像昵称信息功能比较简单,这里直接上代码:.js onGetUserInfo: function(e) { if (!this.data.logged && e.detail.userInfo) { console.log('==允许',this.data.logged) this.setData({ logged: true, avatarUrl: e.detail.userInfo.a原创 2020-08-06 16:11:37 · 2277 阅读 · 2 评论 -
微信小程序--评论功能本地
评论功能界面的实现先来一个效果图:代码有点多,就不贴出来了,需要的请到这里下载:原创 2020-08-06 15:37:32 · 1038 阅读 · 0 评论 -
微信小程序--自带云服务器获取openid
获取openid简介:使用微信小程序本身的云服务器获取openid第一步,app.js中的onLaunch方法里面加入:if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ traceUser: true, }) }第二步,在需要获取openid的地方调用下面的方法onGetOpenid: function() {原创 2020-08-04 20:08:32 · 647 阅读 · 0 评论 -
微信小程序--搜索框样式 及form提交实现
搜索框样式 及form提交实现先看效果图.jsbt_search(e){ console.log('搜索',e) },.wxml<form bindsubmit="bt_search"> <view class="view_search"> <view class="view_icon_input"> <icon class="searchcion" size='15' type='search'></i原创 2020-07-28 21:10:01 · 2072 阅读 · 0 评论 -
微信小程序之算法查询
算法查询1、字符串是否包含某个字符2、数组是否包含某个字符3、对象中是否包含某个字符4、数组中有多个对象,查找对象中的对象是否包含某个字符5、数组中有多个对象,查找对象中是否包含某个字符最后,代码如下:const app = getApp()Page({ data: { /******一、数组********* */ arr: [123, { id: 2, value: '测试' }, '结果'], /******二、对象****原创 2020-07-28 19:41:24 · 1596 阅读 · 0 评论 -
微信小程序吸顶容器sticky
吸顶容器sticky简介:用户进行页面的滚动操作,大于一定高度的时候实现吸顶,封装好了的,大家可以直接拿来用效果图jsPage({ data: { scrollTop: 0, pictureUrl:'https://img-u-0.51miz.com/preview/muban/00/00/47/85/M-478536-D49BBE16.jpg-0.jpg!/quality/90/unsharp/true/compress/true/fw/840' }, onChan原创 2020-07-24 10:24:46 · 1960 阅读 · 0 评论 -
微信小程序——fab悬浮按钮拓展,悬浮按钮
fab悬浮按钮拓展来看看效果图:代码jsPage({ data: { left: 0, right: 80, bottom: 100, bgColor: "#5677fc", btnList: [], list: [{ bgColor: "#16C2C2", //图标/图片地址 imgUrl: "https://d.lanrentuku.com/down/png/1406/40xiaodongwu/chihu原创 2020-07-22 15:52:35 · 2815 阅读 · 2 评论 -
微信小程序——Promise异步简化回调,简易回调,代理接口回调,await的用法,匿名函数
Promise异步简化回调使用的背景:同时存在两个或者多个网络请求,且第二个请求要使用第一个请求返回的数据代码:const app = getApp()Page({ data: { }, onLoad: function () { this.function_1().then(res=>{ console.log('方法1结果:',res) //这里可以把结果放到GetUserEntity_2作为参数 this.function_2原创 2020-07-20 15:13:04 · 1591 阅读 · 0 评论 -
微信小程序--红色圆形数字冒泡(角标)、底部购物车(居底)
红色圆形数字冒泡效果图:.wxss.view_qipao{ width: 35rpx; height: 35rpx; background-color:red; border-radius: 50%; display: flex; align-items: center; justify-content: center; }.text_qipao{ color: white; font-size: 25rpx;}.wxml<view原创 2020-07-17 10:49:11 · 3265 阅读 · 2 评论 -
微信小程序中好看的按钮样式(渐变色)、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
在.wxss文件中代码如下:/* border-radius: 98rpx;是控制按钮边变圆 */.goodbutton { margin-top: 30px; width: 80%; background-color: rgb(252, 126, 67); color: white; border-radius: 98rpx; background: bg_red...原创 2018-09-22 09:56:54 · 41542 阅读 · 11 评论