微信小程序
文章平均质量分 50
小程序
前端江太公
一个理想主义的读书人。前端攻城狮,2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
手把手教你微信小程序如何设置密码输入框
效果图源代码.josn弹出框用了vant小程序的ui,需要下载。也可以不用,抽取关键代码即可。vant-weapp:https://vant-contrib.gitee.io/vant-weapp/#/quickstart "usingComponents": { "van-popup": "@vant/weapp/popup/index" },wxml<van-cell title="展示弹出层" is-link bind:click="showPopup" /&g原创 2021-12-20 15:50:53 · 3537 阅读 · 5 评论 -
微信小程序正则表达式
//手机号码验证:if (!(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(你要验证的手机号))) { wx.showToast({ title: '手机号码有误', duration: 2000, icon:'none' });}//邮箱验证if (!(/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.原创 2021-12-08 10:23:36 · 4056 阅读 · 0 评论 -
小程序使用Base64加密key(秘钥)和iv(偏移量)在进行aes加密,AES加密技术简介与应用。
AES简介AES最一种常见的对称加密算法,对称加密算法也就是加密和解密用相同的密钥。具体的加密流程如下图:明文P 没有经过加密的数据。 密钥K 用来加密明文的密码,在对称加密算法中,加密与解密的密钥是相同的。密钥为接收方与发送方协商产生,但不可以直接在网络上传输,否则会导致密钥泄漏,通常是通过非对称加密算法加密密钥,然后再通过网络传输给对方,或者直接面对面商量密钥。密钥是绝对不可以泄漏的,否则会被攻击者还原密文,窃取机密数据。 AES加密函数 设AES加密函数为E,则 C = E(原创 2021-11-30 13:41:23 · 6264 阅读 · 0 评论 -
微信小程序修改data中对象的属性值
话不多说直接上代码:Page({ /** * 页面的初始数据 */ data: { mingxiparams: { acNo: '', //账号 }, }, //修改mingxiparams中acNo值 bindPickerChange: function (e) { let acNo='mingxiparams.acNo' this.setData({ [acNo]:'1234567890' }) },原创 2021-09-06 09:55:07 · 1249 阅读 · 3 评论 -
微信小程序手写饼状图,非wx-echarts库,简洁易懂,不占代码体积!!!
写在前面:小程序也有echarts组件库,但是我觉得太占代码量了,本来小程序的体积只有2m。在下载个组件库。那就没多少了。索性就手写一个。实现效果:布局<view class="left"> <cover-view class="white"></cover-view> <canvas style="width: 136px; height: 136px;" canvas-id="Canvas"></canvas></view&原创 2021-09-02 10:47:17 · 1264 阅读 · 0 评论 -
微信小程序获取input值的方法
1、bindinput<input bindinput='getInputValue' name='price' type='text' placeholder='输入内容'></input>其中 e.detail是获取input数据 其中包含value值, cursor是获取光标的位置。getInputValue(e){ console.log(e.detail)// {value: "ff", cursor: 2} }2. bindsubmit<f原创 2021-09-01 16:26:06 · 3737 阅读 · 0 评论 -
微信小程序之分包加载,解决代码超过2M的方法
2017.01.09 小程序上线时,微信限制了代码包不能超过1MB 大小,(现在是2M了)限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种“秒开”体验。然而,2MB 的大小也限制了小程序功能的扩展,小程序业务的发展可能需要更大的体积。那么,能否有一种方案,在增加小程序包大小的同时,也能保持不错的启动速度呢?为了解决这个矛盾点,微信推出了「分包加载」这个技术方案。分包加载的介绍大部分小程序都会由某几个功能组成,通常这几个功能之间是独立的,但会依赖一些公共的逻辑,并.原创 2021-08-24 16:05:38 · 3919 阅读 · 0 评论 -
微信小程序源码:淘宝客外卖返利优惠券、头像 壁纸 朋友圈文案查询、古诗词技术文章查询
服务类目提供图片查询,头像壁纸服务,朋友圈动态文案,古诗词文章搜索、小工具小游戏游戏、外卖,购物,拼单优惠券项目等开发者中心江子辰 18307106535文件简述pages 主包 包含tabbar页面等packageHome 分包 :技术博客、电风扇、搜索文案packageB分包:古诗词查询packageC分包:作者简介、小空调、搜索功能清单:淘宝客返利优惠券头像 壁纸 朋友圈文案查询诗词技术文章安装下载源码包用微信开发工具打开即可。扫码可查看项目源码地址:htt.原创 2021-08-09 15:34:35 · 3260 阅读 · 2 评论 -
微信小程序实现下拉刷新功能
本文将简单介绍如何实现微信小程序的下拉刷新将要使用的api:wx.showNavigationBarLoading(Object object)wx.showLoading(Object object)wx.hideLoading(Object object)wx.hideNavigationBarLoading(Object object)wx.stopPullDownRefresh(Object object)wx.request(Object object) //刷新.原创 2021-07-27 09:04:11 · 1526 阅读 · 0 评论 -
微信小程序获取当前位置和城市名
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下目录一、授权并获取经纬度腾讯地图API**简介**Hello world!一、授权并获取经纬度1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting;2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数);3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家.原创 2021-07-23 16:27:10 · 7193 阅读 · 3 评论 -
微信小程序map组件 markers 展示当前位置&&修改标记点图标
当前位置展示:<view> <map id="myMap" show-location class="container" style="width: 100%; height: 800rpx;" /></view>onShow: function() { this.mapCtx = wx.createMapContext('myMap') this.mapCtx.moveToLocation()}改个标记点的默认样式:方法一<view原创 2021-07-22 16:33:30 · 7532 阅读 · 3 评论 -
微信小程序经纬度获取地图导航(导航接入第三方)
API方法wx.openLocation我们需要用到微信官方文档的位置API wx.openLocation其中的参数有很多,具体可参考官方文档:微信官方文档-位置所需参数latitude(必填) :纬度,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系;longitude(必填) :经度,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系;scale(非必填) :缩放比例,范围5~18;name(非必填) :位置名称(打开第三方导航前的定位描述);ad原创 2021-07-20 14:01:33 · 1866 阅读 · 0 评论 -
微信小程序实现返回顶部
两种方法一,使用view形式的回到顶部html<image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>css data: { floorstatus:false },/* 返回顶部 */.goTop{ height: 80rpx; width: 80rpx; position: fixed;原创 2021-07-19 11:29:57 · 1490 阅读 · 0 评论 -
移动端调试vConsole
平时web开发时,在手机上,如果是要看控制台信息,都需要alert弹窗,这样很不友好.还会阻拦进程。通过vConsole.js 重写console方法,实现了类似于微信小程序的移动端调试效果。具体使用方法也很简单 <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script> <script> // init vConsole原创 2021-06-03 19:48:59 · 1324 阅读 · 0 评论 -
微信小程序:报错(in promise) MiniProgramError {“errMsg“:“navigateTo:fail can not navigateTo a tabbar page“}
今天学习了小程序实现路由跳转,我在操作的时候在控制台出现以下错误信息。 翻译过来的意思是:(承诺中)微程序错误{“errMsg”:“n”avigateTo:故障can未导航到选项卡页“}对象 问题原因: 经过查阅资料,知道使用navigateTo路由跳转方式,保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 解决办法:只需在js文件的点击事件中,配置跳转的url地址与tabbar中的跳转地址不一样就ok. 我就简单说一下我用navigateTo方式实现的小程序路由...原创 2020-10-28 10:46:32 · 6900 阅读 · 4 评论 -
wechat微信小程序 :对应的服务器证书无效
报错信息如下wx.request 错误VM157:1 https://data.miaov.com 对应的服务器证书无效。控制台输入 showRequestInfo() 可以获取更详细信息。原因证书认证以过期或者未生效解决方法1、微信开发者工具2、详情3、选中_不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书这种办法只能是在开发者工具上使用,已上线的小程序就重新认证吧...原创 2020-09-11 21:59:06 · 3412 阅读 · 0 评论 -
全网最全微信小程序项目源码
微信小程序官方Demo(Hao-Wu/WeApp-Demo)微信小应用示例代码(phodal/weapp-quick)微信小应用地图定位demo(giscafer/wechat-weapp-mapdemo)微信小应用- 掘金主页信息流(hilongjw/weapp-gold)微信小程序(应用号)示例:微信小程序豆瓣电影(zce/weapp-demo)微信小程序-豆瓣电影(hingsi...原创 2020-08-31 15:02:38 · 3873 阅读 · 0 评论 -
微信小程序为什么要用https????https之解析
微信小程序一定要用https的理由,小程序使用HTTPS链接分析 一、HTTPS HTTPS是HTTP的安全版,在HTTP的基础上加入SSL证书 (服务器证书)后形成的安全协议,不但可以建立信息加密通过保障数据传输的安全,还能认证服务器的真实性,防止“钓鱼”网站。每个微信小程序都需要先设置一个通讯合法域名,并通过HTTPS请求进行网络通信,不满足的域名和协议无法发出请求,小程序也会无法使用。 二、 HTTPS保障小程序使用安全 在互联网...原创 2020-08-23 11:07:03 · 2304 阅读 · 0 评论 -
WeChat小程序如何实现转发功能?
官网文档:链接: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html.一、点击小程序转发1. 不加参数 //转发 onShareAppMessage: function() { let users = wx.getStorageSync('user'); if (res.from === 'button') {} return { t原创 2020-08-14 23:05:59 · 1036 阅读 · 0 评论 -
小程序异步请求token解决办法
小程序一般需要用token,去识别用户身份,每次获取到token之后,再进行下一步操作。再获取到token之后,将token同步缓存app.js:login: function () { var that = this; return new Promise(function (resolve, reject) { if (wx.getStorageSync('token')) { resolve(wx.getSto原创 2020-08-13 08:49:29 · 1833 阅读 · 1 评论 -
处理小程序网络请求异步执行的问题
这两天写微信小程序注意到了有些时候会发现使用this.data.list拿到的是空数据,但是明明自己已经请求到了数据了。这就很让人头疼。原因:因为wx.request是一个异步的请求,所以数据请求的同时,可以继续向下执行函数。所以这里值还没有赋值上就开始打印了变量的值比如:以下代码在执行的时候 this.updateData()和 this.updateState()不会分先后,可能先执行前者,可能先执行后者。如果先执行后者的话就先打印list数组了,那么这个时候因为前者是请求数据的,还未执行呢就已经打原创 2020-08-11 23:37:14 · 1176 阅读 · 0 评论 -
小程序解析html渲染在页面上
最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的。一、使用小程序的wxParse解析下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下 下面是具体的使用步骤1.在app.wxss全局样式文件中,需要引入wxParse的样式表@import "/page/wxParse/wxParse.wxss";2.在需要加载html内容的页面对应的js文件里引入wxPars原创 2020-08-11 21:18:26 · 1188 阅读 · 0 评论 -
小程序动态绑定样式
现在要在微信小程序中实现点击控件修改样式,如下微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它。第一步:在wxss中定义被点击和未被点击的样式,如下:.is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff;}.service_selection .normal{ border: none; color: #333;原创 2020-08-10 21:19:48 · 1989 阅读 · 0 评论 -
WeChat拆分模块
1、创建模块用name<template name="swiper"> <swiper class="swiper" loop="true" autoplay="true" interval="2000" indicator-dots="true" circular="true" duration="1000" skip-hidden-item-layout="true" indicator-active-color="#fff"> <swiper-item wx:f原创 2020-08-09 02:19:33 · 1422 阅读 · 0 评论 -
WeChat小程序的登录授权关于token
微信小程序登录授权【重点也是难点】下载天使童装项目源码:https://github.com/EastWorld/wechat-app-mall需要登录授权的页面必须要传递token哪些页面需要token商品中详情页:收藏,加入购物车我的:购物车页面token值从哪里来?1.何为token:前端鉴权的一种方式,token由后端生成,token是有时效性2.微信小程序登录授权拿到token 第一步:登录流程 参考文档: https://developers.we原创 2020-08-09 00:22:16 · 5638 阅读 · 0 评论 -
WeChat小程序封装数据请求
封装数据请求环境地址的统一//env.jsmodule.exports={ //开发环境 dev:{ baseUrl:'http://127.0.0.1:8080' }, //生产环境 prod:{ baseUrl:'https://api.it120.cc' }, //测试环境 test:{ baseUrl:'https://api.1909A.com' }}业务数据请求方法的统一商品列表接口详情接口加入收藏搜索.原创 2020-08-09 00:21:14 · 1307 阅读 · 0 评论 -
微信小程序组件的拆分及其传值
1、创建component组件2、在index主页面的index.json文件里配置引入组件3、在主页面的wxml里面直接写shoplist标签wx:for="{{list}}" 是循环已经在js文件里请求到的数据以下是传值(传给组件)characteristic="{{item.name || item.characteristic}}"pic="{{item.pic}}" minPrice="{{item.minPrice}}"originalPrice="{{item.origi原创 2020-08-08 23:14:44 · 1440 阅读 · 0 评论 -
小程序关于switchTab不能传参的问题
对于下面链接博客的补充微信小程序:errMsg“:“navigateTo:fail can not navigateTo a tabbar page 报错问题链接: https://blog.youkuaiyun.com/ZiChen_Jiang/article/details/107867061.上篇博客说道想要跳转到tabbar,把wx.navigateTo更改为wx.switchTab即可。但是又有一个bug就是wx.switchTab不能传参以下是解决办法:wxml <van-grid原创 2020-08-08 11:21:00 · 2725 阅读 · 0 评论 -
微信小程序:errMsg“:“navigateTo:fail can not navigateTo a tabbar page 报错问题
微信小程序关于:errMsg":"navigateTo:fail can not navigateTo a tabbar page 报错问题原因很有可能是由于在底部tabbar里面定义了同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转。tab栏是index 和logs那么home 页面中对应方法调用wx.navigateTo路由转换到logs页面,会报错errMsg: “navigateTo:fail can not navigateTo a tabbar原创 2020-08-07 17:43:57 · 10745 阅读 · 1 评论 -
微信小程序引入UI组件库
小程序如何引入第三方UI组件(通常也是基于npm)1、打开cmd,在小程序根目录内,初始化npmnpm init -y2、执行命令安装 npm 包:以微信官方WEUI组件库为示例npm install --save weui-miniprogram3、安装完成后,在微信开发者工具中的菜单栏:详情-----使用npm模块-----工具 ------ 构建 npm :4、app.wxss引入全局样式@import '/miniprogram_npm/weui-miniprogram/w原创 2020-08-07 10:57:35 · 1889 阅读 · 0 评论 -
小程序点击跳转页面并传入一个对象及接受
传参data-item="{{item}}" <view wx:for="{{ list }}" wx:key="{{ index }}" catchtap="onclick" data-item="{{item}}"> <image src="{{ item.images.small }}"></image> <text>{{ item.title }}</text> </view>点击事件 onclick(e)原创 2020-08-05 21:25:01 · 809 阅读 · 0 评论 -
小程序事件、组件、生命周期、路由及数据请求
一、事件流事件冒泡:从点击的元素开始触发,向上事件传播阻止事件冒泡:event.stopProPagation()事件捕获:多上级元素传递,传递到最具体的元素btn.addEventListener('click',function() {//回调},true)二、小程序中事件冒泡和阻止冒泡bind+事件名="方法名" 向上传递事件,即事件冒泡catch+事件名="方法名" 阻止事件冒泡三、小程序生命周期整体小程序的生命周期:App({ onLaunch()原创 2020-08-05 19:18:14 · 1483 阅读 · 0 评论 -
豆瓣电影api系列
豆瓣电影api1、获取正在热映的电影:接口:https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b参数:start : 数据的开始项count:单页条数city:城市如:获取 广州热映电影 第一页 10条数据:https://api.douban.com/v2/movie/in_theaters?apikey=0b2bdeda43b5688921839c8ecb20399b&a原创 2020-08-05 17:05:50 · 2689 阅读 · 0 评论 -
微信小程序添加轮播组件
swiper一、示例wxml <swiper class="posta-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true"> <swiper-item> <image src="/assets/img/t01df6660bd35903294.jpg"></image> </swiper-item> <swiper-i原创 2020-08-05 16:46:58 · 850 阅读 · 0 评论 -
微信小程序添加音乐组件
audio音频组件简单示例wxml<audio src="/assets/img/许嵩 - 有何不可.mp3" loop="true" controls="true" name="有何不可" author="许嵩" poster="/assets/img/许嵩.png"></audio>效果官方示例wxml<!-- audio.wxml --><audio poster="{{poster}}" name="{{name}}" author="原创 2020-08-05 16:21:51 · 6934 阅读 · 0 评论 -
微信小程序添加视频组件
wxml<View>1.播放网络视频</View><view > <video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e0020401288254原创 2020-08-05 16:02:20 · 2572 阅读 · 2 评论 -
初步了解小程序
一、了解微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用张小龙发布时间2017年1月9日二、微信小程序和普通H5的区别1. 微信小程序用开发者工具来查看预览页面,H5用浏览器来查看渲染页面2. 微信小程序扩展了底层能力,H5调用底层能力比较弱3. 微信小程序没有完整的JS API,但H5拥有完整的JS API(EcmaScript,DOM,BOM)开发能力4. 渲染机制不同:微信小程序渲染线线程和逻辑线程是独立并行运行的,而原创 2020-08-04 19:14:01 · 801 阅读 · 0 评论
分享