微信小程序
文章平均质量分 60
林中明月间。
努力又平庸 ,自卑又内敛 。
展开
-
微信小程序详解(文件组成 、目录结构、生命周期方法、AppId、组件(标签)、语法、事件、Api、开发工具)
AppID对应网上注册的小程序id。一个id对应一个小程序项目。åå文件组成小程序一共由四种文件组成。文件类型 必需 作用js 是 页面逻辑(没有window对象,即没有document对象,alert等)wxml 是 页面结构(相当于.html文件)json 否 页面配置wxss 否 页面样式表(相当于.css文件)目录结构。转载 2022-12-29 12:46:06 · 1801 阅读 · 0 评论 -
如何设置公众号菜单栏跳转到小程序
https://www.kancloud.cn/huangfen/xdkj/1584152转载 2021-05-07 17:13:02 · 6650 阅读 · 0 评论 -
JS中将对象转化为数组,数组转对象
https://www.cnblogs.com/wancheng7/p/8735168.html对象的两种取值方式我们都知道,JS中对象有两种取值方式,通过在.后面直接加属性名取值,这也是我们最常使用的一种方式,例如:let obj = {name: 'wan'};console.log(obj.name); //wan这是最普通的一种方式,还有一种方式我们用的不太多,就是使用[]包住属性名取值,类似于数组那样,例如let obj = {name: 'wan'};consol转载 2020-11-27 12:04:46 · 3683 阅读 · 0 评论 -
微信小程序识别字符串中的手机号,手机号高亮显示,并且可以点击这个手机号,拨打电话?
这个需求类似淘宝物流,网上查了很多 微信社区有个很帮助我 这里:https://developers.weixin.qq.com/community/develop/doc/0002441c8440188e7e69bf08756400 感谢正则匹配留言,找出电手机号码,结合wx.makePhoneCall// 下面这段比较繁琐var a = '15900000001一二15900000002三四15900000003五六15900000004', b = a.match(/(1\d{1...转载 2020-08-06 14:20:24 · 2780 阅读 · 0 评论 -
微信小程序 -- 订阅消息实现
https://blog.csdn.net/weixin_42460570/article/details/103347322https://www.jianshu.com/p/0077a8084b44核心代码wx.requestSubscribeMessage({ tmplIds: [''], success (res) { }})<button bindtap="subscribeMsg">点击订阅消息</button> // 订阅消息转载 2020-08-01 19:58:13 · 3366 阅读 · 1 评论 -
微信小程序--在CANVAS画布上划动,页面禁止滑动(二维吗)
https://www.cnblogs.com/woshidouzia/p/10784437.html要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效。<canvas canvas-id="myCanvas" class="myCanvas" disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="touc转载 2020-07-31 15:39:18 · 1484 阅读 · 0 评论 -
微信小程序生成二维码
https://www.jianshu.com/p/e6021798cd40github地址weapp-qrcode 点击查看(欢迎star),其中附有源工程地址使用在github上下载工程,主要用到的文件是/utils/weapp-qrcode.js文件引入文件:可以将文件直接放在自己工程下面引入使用import QRCode from '/utils/weapp-qrcode.js'使用:new QRCode('myQrcode',{ text: 'http:转载 2020-07-30 18:00:47 · 1212 阅读 · 0 评论 -
微信小程序判断是否为iphonePlus iphoneX,iphoneXR等
onLaunch: function () { let _self = this; wx.getSystemInfo({ success: res => { let modelmes = res.model; if (modelmes.search('iPhone X') != -1 || modelmes.search('iPhone 11') != -1 || modelmes.search('iPhone 11 Pro Max')...转载 2020-07-29 20:58:53 · 4049 阅读 · 0 评论 -
清除浮动BFC、div随子元素高度增加而改变
因为高度塌陷所以需要清除浮动:元素脱离了文档流满足下列条件之一就可触发BFC 【1】根元素,即HTML元素 【2】float的值不为none 【3】overflow的值不为visible 【4】display的值为inline-block、table-cell、table-caption 【5】position的值为absolute或fixed/*解决:清除...原创 2018-05-15 16:23:27 · 386 阅读 · 0 评论 -
微信小程序tab切换
ml:<view class='navbar'> <scroll-view scroll-x="true" class='navbar-box'> <view id="0" data-jk="index" class="navbar__item {{activeIndex == 0 ? 'bar__item_on' : ''}}" bindtap="tabClick"> <view class="navbar__titl..转载 2020-07-16 16:43:46 · 301 阅读 · 0 评论 -
微信小程序-模版详解<template>
https://www.jianshu.com/p/cfca91e9a78b转载 2020-07-16 14:45:52 · 1848 阅读 · 0 评论 -
wx.navigateBack() 携带参数返回
https://blog.csdn.net/NAMECZ/article/details/81188190?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight.转载 2020-07-16 10:35:07 · 1870 阅读 · 0 评论 -
微信小程序购物车弹出层
wxml:<!--index.wxml--><button bindtap="showCart">按钮</button><!--遮罩--><view class='mask' hidden='{{mask}}' catchtap='hideAllBox'></view><!--购物车弹窗--><view class='lay-box detail-cart {{!cartBox ? "on" :...原创 2020-05-18 00:08:12 · 2633 阅读 · 6 评论 -
微信小程序获取微信收货地址
<!-- 同步微信收货地址 --><view bindtap='getCity' class='wxcity jus-b ali-c'> <view class='ali-c'> <image class='img' src='/images/share-icon_01.png'></image> <!--微信小图标--> <view>获取微信收货地址</view> <...原创 2020-05-17 00:15:51 · 1159 阅读 · 0 评论 -
微信小程序 单选、多选
https://blog.csdn.net/a772116804/article/details/106144553checkList:[] 选中的数据的id的数组集合checkedOne(id) { let idIndex = this.checkList.indexOf(id); //选中的数据的id的数组集合下标 if (idIndex >= 0) { //-1 不包含,包含去重 // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状转载 2020-05-15 16:37:42 · 1296 阅读 · 0 评论 -
微信公众号获取授权登录机制
https://www.cnblogs.com/pangguoming/p/9520610.html配置授权回调的页面在JS接口安全域名中,点击修改来设置网页的域名。安全域名只需要填写域名或IP地址即可,不需要添加http,如www.xxxx.com或127.0.0.1,则在该域名下的页面都能够得到授权,而相关的二级或三级域名(aaa.xxxx.com)则无法获得授权。注 若填写时增加了协议,如 http://www.xxxx.com 或 http://127.0.0.1,页面同样可以获得授权,但.转载 2020-05-11 15:40:56 · 2381 阅读 · 0 评论 -
微信小程序提示更新版本
参考:https://www.jianshu.com/p/4f5e3faaf483https://blog.csdn.net/kirinlau/article/details/89022913//app.jsApp({ onLaunch: function (options) { this.autoUpdate() }, autoUpdate : function(...转载 2020-04-24 16:07:45 · 1485 阅读 · 0 评论 -
微信小程序——video使用总结
https://www.cnblogs.com/sese/p/9353864.html转载 2020-04-22 11:28:52 · 1377 阅读 · 0 评论 -
微信小程序引入外部js module.exports 的使用
https://developers.weixin.qq.com/miniprogram/dev/reference/api/exports.html微信官方我只是搬过来module.exports 的引用// common.jsfunction sayHello(name) { console.log(`Hello ${name} !`)}function sayGoo...转载 2020-04-10 11:03:08 · 5296 阅读 · 0 评论 -
微信小程序 页面滚动头部固定顶部
http://www.rioyi.com/a/news/fangan/235.htmlhttps://www.jb51.net/article/160371.htmhttps://www.cnblogs.com/lishuang2243/p/10998432.html我的代码:wxml:<scroll-view style="width:100%;height: 100%...转载 2020-03-31 22:30:25 · 6035 阅读 · 4 评论 -
微信小程序开发秒表计时器
https://www.jianshu.com/p/c61028d7d509https://blog.csdn.net/Missbelover/article/details/93749680?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task...转载 2020-03-31 09:50:10 · 3302 阅读 · 1 评论 -
小程序获取元素宽高
onLoad: function () { //获取元素宽度 let _this = this; const query = wx.createSelectorQuery(); query.select('#vid').boundingClientRect(); query.exec(function (res) { console.log...转载 2020-03-23 17:02:17 · 3977 阅读 · 0 评论 -
微信小程序扫描二维码、小程序码进入并获得携带参数
https://blog.csdn.net/brightming/article/details/81953571转载 2019-12-31 15:33:24 · 2673 阅读 · 0 评论 -
微信小程序物流信息展示
<!-- 物流信息 --><!-- 外层pages --><view class='pages' wx:if="{{showexpress}}" bindtap='closeexpress'> <!-- 头部 --> <view class='head' wx:if='{{expresslist.list.length>...转载 2019-08-28 16:48:46 · 4744 阅读 · 0 评论 -
微信小程序:文本的展开与收起
<view class='special'> <view class="view_jianjie {{ellipsis?'ellipsis':'unellipsis'}}"> 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内容 这里是文字内...转载 2019-08-28 19:17:29 · 3782 阅读 · 1 评论 -
微信小程序进行地图导航,地图展示功能
页面调用js: address(){ wx.getLocation({//获取当前经纬度 type: 'wgs84', //返回可以用于wx.openLocation的经纬度,官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息 success: function (res) { wx.open...转载 2019-08-29 09:15:40 · 5087 阅读 · 1 评论 -
微信小程序:点击图片进行预览
https://www.jianshu.com/p/8677e5a1927awxml:<view class='index_showpic'> <view class='li_pic' wx:for="{{imgArr}}" wx:key='index'> <image src='https://{{item}}' bindtap='p...转载 2019-09-04 16:12:13 · 6683 阅读 · 0 评论 -
微信小程序分享转发功能(带参数)
最简单的:https://blog.csdn.net/onion_line/article/details/83036502/** * 用户分享自定义 */ onShareAppMessage: function(res) { return { title: '哈根达斯冰激凌5折特惠', path: '/pages/index/index?go...转载 2019-09-18 15:31:25 · 2024 阅读 · 0 评论 -
微信小程序按钮授权获取用户信息、授权获取手机号码
http://www.hehaibao.com/wechat-button-get-userinfo/微信小程序如何按钮授权获取用户信息https://blog.csdn.net/dabao87/article/details/81367276 微信登录授权https://www.cnblogs.com/xyyt/p/9513467.html请求用户授权获取手机号码https...转载 2020-03-31 15:51:33 · 15273 阅读 · 0 评论 -
微信小程序自定义单选,微信单选使用
<view class='pay_box'><!--在最外面包住--> <radio-group class="radio-group" bindchange="radioChange"> <view class='common_pay' wx:for="{{paywaylist}}" wx:key="{{index}}"...转载 2019-03-28 14:57:35 · 1850 阅读 · 0 评论 -
微信小程序点击拨打电话,添加联系人,在线客服
freeTell: function(){ wx.makePhoneCall({ phoneNumber: '03123688777', }) }模拟预览效果:在手机上看到的效果微信不会直接发起电话呼叫,而是跳转到拨号页面,自动完成号码输入。...转载 2019-08-13 10:31:06 · 42265 阅读 · 3 评论 -
微信小程序购物车页面
wxml部分wxml:<!--pages/cart/cart.wxml--> <view> <scroll-view class = "scrol_view_style" scroll-x = "{{false}}" scroll-y = "{{true}}"> <view wx:for-items = "{{dat...原创 2019-08-12 14:39:19 · 1946 阅读 · 1 评论 -
微信小程序textarea 限制字数js
wxss:.refund{ width: 96%; margin: auto; display: flex; flex-direction: column;}.refund .text{ color: #333333; font-size: 28rp...原创 2019-04-22 17:56:19 · 1225 阅读 · 0 评论 -
微信小程序模拟select
wxss:page{ background: #f5f5f5;}.refund{ width: 96%; margin: auto; display: flex; flex-direction: column;}.refund text{ color: #333333; font-size: 28rpx; line-height: 70rpx;}.c...原创 2019-04-23 09:51:33 · 579 阅读 · 0 评论 -
微信小程序 父子组件传值通信
微信小程序自定义组件微信小程序 父子组件传值通信//引用自定义组件的页面 page.json{ "usingComponents": { "v-banner": "/components/banner/index", "v-cart": "/components/cart/index" }}<v-banner><v-banner>...转载 2019-04-24 16:26:32 · 2258 阅读 · 0 评论 -
微信小程序 点击复制文本到剪贴板
https://www.cnblogs.com/xiao-ling-zi/p/9377687.html转载 2019-04-24 17:01:29 · 2183 阅读 · 0 评论 -
微信小程序 swiper 显示图片计数 当前/总数
https://www.cnblogs.com/xiaoxiao2017/p/10383870.html转载 2019-04-24 17:45:15 · 4230 阅读 · 0 评论 -
微信小程序日历组件、日期选择
https://www.jianshu.com/p/3c52b27168e4<!-- 时间 --><picker mode="date" value='{{date}}' start="2019-10-01" end="" bindchange='bindDateChange'> <view class='lianxi'> <i...转载 2019-05-05 14:17:14 · 2786 阅读 · 0 评论 -
微信小程序wxs
WXS(WeiXin Script)是小程序的一套脚本语言,wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法,例如想取出一个字符串的最后一位,就不能调用slice()方法。使用 ①写好wxs文件 然后导出要使用的方法或变量②在待使用页面 使用<wxs src="/path" module="tools" /&...转载 2019-05-08 22:35:32 · 1042 阅读 · 0 评论 -
微信小程序弹窗滚动穿透问题
转自:https://blog.csdn.net/mcyang0929/article/details/79162090https://blog.csdn.net/weixin_39429321/article/details/82834041就是在遮罩层上加上catchtouchmove="ture",不需要控制任何class和样式等等(因模拟器无touch事件,需在真机测试)。...转载 2019-05-07 11:05:28 · 2007 阅读 · 0 评论