![](https://img-blog.csdnimg.cn/61c35bd425ff4ea0bf2bfe39098d7220.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
微信小程序开发总结
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
字符串转换为字节数组、16进制转换为base64、base64转换为字符串数组、base64转换为16进制(微信小程序)
【代码】字符串转换为字节数组、16进制转换为base64、base64转换为字符串数组、base64转换为16进制(微信小程序)原创 2024-05-30 17:42:33 · 361 阅读 · 0 评论 -
微信小程序怎么实现下拉刷新?
自定义刷新,通过 bindscrolltoupper 属性, 当滚动到顶部/左边,会触发 scrolltoupper事件,所以我们可以利用这个属性,来实现下拉刷新功能。使用官方提供的API。原创 2024-01-02 21:58:02 · 928 阅读 · 0 评论 -
开发常用 -- 时间工具封装
1、格式化后的日期时间:2023/06/05 16:47:242、格式化后的日期:2023-6-53、格式化获取当月的第一天:2023-6-14、格式化获取当月的最后一天:2023-6-305、格式化传入的日期得出当月的第一天:2023-6-16、格式化传入的日期得出当月的最后一天:2023-6-307、获取当前年月:2023-68、以15号为分界线,计算当前年月9、 适用于微信小程序的倒计时原创 2020-07-21 23:35:18 · 88 阅读 · 0 评论 -
Vue/微信小程序 自定义加载中loading效果
【代码】Vue/微信小程序 自定义加载中loading效果。原创 2019-09-06 11:27:36 · 1312 阅读 · 0 评论 -
微信小程序 —— 图片占位处理
【代码】微信小程序 —— 图片占位处理。原创 2023-06-01 17:44:08 · 507 阅读 · 0 评论 -
微信H5开发 总结一
jssdk 就是 jsbridge,在原生端暴露接口,js调原生端接口,分享属于jssdk里面的其中一个api,用到就要服务器签名信息。微信jssdk就是相对于小程序提供的api一样。小程序也是基于这个jssdk来开发的而已,签名不需要登录,只需要后台返回签名信息。你使用到jssdk就要签名。原创 2020-07-21 18:05:42 · 311 阅读 · 0 评论 -
H5页面 拦截微信授权 + 微信签名 + 微信支付 + 注意事项
一、提示只能在微信客户端打开H5二、微信授权登录三、VUE移动端使用vConsole的调试工具四、微信分享签名五、微信公众号微信支付封装六、适配大屏手机,更改背景图 若需要微信授权获取用户的信息以及微信签名,则需要用户在微信客户端打开H5 当前是否存在code,不存在则调用微信公众号网页授权登录换取code,并保存在本地;存在则说明已登录过 微信签名封装:微信公众号获取签名信息封装: 仅在开发和测试环境可打开调试原创 2020-06-16 11:03:14 · 2478 阅读 · 0 评论 -
小程序 -- 获取手机验证码功能代码
【代码】小程序 -- 获取手机验证码功能代码。原创 2020-06-09 15:49:33 · 1391 阅读 · 0 评论 -
swiper不生效、picker在苹果机定位不准确
排查发现,picker的value值类型是string,而我们默认传进去的年份的类型是number,所以在苹果机下不匹配。由于是服务端渲染,所以不支持组件的。原创 2020-07-10 14:54:55 · 314 阅读 · 0 评论 -
说说微信小程序中路由跳转的方式有哪些?区别?
在微信小程序中,每个页面可以看成是一个pageModel,pageModel全部以栈的形式进行管理。其中关于它们的页面栈的关系如下:navigateTo 新页面入栈redirectTo 当前页面出栈,新页面入栈navigateBack 页面不断出栈,直到目标返回页,新页面入栈switchTab 页面全部出栈,只留下新的 Tab 页面reLanch 页面全部出栈,只留下新的页面原创 2023-04-18 14:34:06 · 427 阅读 · 0 评论 -
微信小程序的生命周期函数有哪些,以及执行过程?
小程序中,生命周期主要分成了三部分:① 应用的生命周期 ② 页面的生命周期 ③ 组件的生命周期当存在也应用生命周期和页面周期的时候,相关的执行顺序如下:打开小程序:(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady进入下一个页面:(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onR原创 2023-04-18 11:55:16 · 1955 阅读 · 0 评论 -
说说你对微信小程序的理解,以及小程序有什么优缺点,相比H5区别是什么?
1、对微信小程序的理解2、小程序的背景3、小程序的优点4、小程序的缺点5、小程序与H5的区别快速的加载更强⼤的能⼒原⽣的体验易⽤且安全的微信数据开放⾼效和简单的开发 小程序与H5的区别运⾏环境:⼩程序基于浏览器内核重构的内置解析器系统权限:⼩程序能获得更多的系统权限,如⽹络通信状态、数据缓存能⼒等渲染机制:⼩程序的逻辑层和渲染层是分开的原创 2023-04-18 11:10:01 · 287 阅读 · 0 评论 -
用户openId 和 unionId 的区别
1、长度不同openId=28,unionId=292、openId 是同一用户同一应用的唯一标识不同小程序或者不同微信H5,openId都是不一样的单个应用中用户的唯一标识是openId同一个appId下用户openId肯定是相同的 3、unionId 是同一用户不同应用的唯一标识不同应用是指同一微信开发平台下的不同应用。同主体(简单理解同一个公司注册的,并关联在平台),用户的唯一标识是 unionId也就是说,不同应用要找用户的唯一标识,就是 uni...原创 2020-10-29 16:11:33 · 21531 阅读 · 0 评论 -
微信小程序 - uCharts 图表
微信小程序 - uCharts 图表原创 2020-06-29 17:42:41 · 8582 阅读 · 1 评论 -
微信小程序 - 纯前端实现:模糊查询分页功能
纯前端实现模糊查询功能,并实现分页加载~tip:先在本地存储好数据wxml:<view class="page"> <view class="flex-row-start seach"> <input type="text" placeholder="请输入关键词进行搜索" class="search-input" placeholder-style="color:#C4C4C4" value="{{ keyWord原创 2020-11-12 14:15:01 · 649 阅读 · 2 评论 -
微信小程序API - 文件管理之下载、打开、重命名wx.downloadFile()
已验证Android,iOS 都没问题建议在手机上测试 wx.downloadFile({ url: 'https://xxxxx.pdf', // 源文件地址 filePath: wx.env.USER_DATA_PATH + '/xxx.pdf', // 指定的本地文件路径,一定要带文件后缀名 不然无法打开 wx.env.USER_DATA_PATH 类似本地文件根目录 success(res) { const filePath =原创 2020-11-05 17:50:16 · 1801 阅读 · 0 评论 -
wepy -- 坑
注意事项:1.在文件的结尾处 敲回车 必须有换行符, 且没有空格 否则报错 error Newline required at end of file but not found eol-last2.字符串必须是单引号3.improt 结尾 没有分号 在程序里也不要加分号4.wx:if="{{}}" 加双引号5.CSS 样式图片和标签中的 img src='' 不可以静态加...原创 2020-08-12 10:07:06 · 855 阅读 · 0 评论 -
微信小程序之 ---- wepy
一、声明实例声明一个App小程序实例 :export default class MyAPP extends wepy.app { }import wepy from 'wepy';export default class MyAPP extends wepy.app { customData = {}; customFunction () { } o...原创 2020-08-12 10:04:21 · 208 阅读 · 0 评论 -
echart 和 uchart 的区别
Echarts 是一个比较强大又功能齐全的图表库。Ucharts 虽然没有 Echarts 及F2图表功能强大,但可以实现一套业务逻辑各端通用。它是一个高性能跨全端图表,支持H5、小程序(微信/支付宝/百度/头条)、APP。调用简单方便、性能及体验极佳。Ucharts 打包后的体积相比Echarts小很多很多,所以性能更好,也特别适合在小程序端,因为小程序上传代码有大小限制。...原创 2020-07-29 00:06:48 · 4637 阅读 · 0 评论 -
微信小程序 -- 弹窗禁止触及到底层滚动事件
<view class="rule-dialog" wx:if="{{ ruleShow }}" catchtouchmove="catchTouch"> ……</view> catchTouch(){ return false },原创 2019-10-12 16:56:31 · 341 阅读 · 0 评论 -
微信小程序 -- 微信更新机制Promise 封装
更新微信小程序事件 - 放在onLaunch避免更新机制影响用户下单流程const $wxAppUpdateVersion = () => { // 小程序更新机制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager....原创 2019-08-09 16:22:26 · 376 阅读 · 0 评论 -
微信小程序——收集formId
<form bindsubmit="formSubmit" report-submit > <buttonformType="submit">确定</button></form>//获取formIdformSubmit: function(e) {let fId = e.detail.formId;// 然后...原创 2018-10-16 11:56:19 · 942 阅读 · 0 评论 -
微信小程序 -- 解析小程序携带的场景参数
当小程序码携带的参数时这样子的时候{scene: "stationId%3D2347%26stationType%3D3"}可以通过以下方法解析并获取参数:第一步:decodeURIComponent(options.scene)该方法的作用是对 encodeURIComponent() 函数编码的 URI 进行解码。解码成以下:"stationId=2347&am...原创 2019-10-10 14:33:53 · 1582 阅读 · 0 评论 -
微信小程序 -- 拖动悬浮按钮的实现
1. 适配屏幕以及头部tab如图所示 上下左右边界值html: <!-- 刷新 --> <view class='refresh' catchtap='refresh' catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" styl...原创 2019-09-23 15:19:50 · 2605 阅读 · 0 评论 -
微信小程序——回到顶部
1. 使得view 回到顶部的方法wx.pageScrollTo({ scrollTop: 0, duration: 300})2. 使得scroll-view 回到顶部的方法在scroll-view标签中加入属性scroll-top='{{ topNum }}'将topNum设置为0 则是回到顶部...原创 2018-10-29 17:28:57 · 1144 阅读 · 0 评论 -
微信小程序——QQ地图——JavaScriptSDK
/** * 微信小程序JavaScriptSDK * * @version 1.0 * @date 2017-01-10 * @author jaysonzhou@tencent.com */var ERROR_CONF = { KEY_ERR: 311, KEY_ERR_MSG: 'key格式错误', PARAM_ERR: 310, PARAM...原创 2020-07-20 13:58:17 · 261 阅读 · 0 评论 -
微信小程序——过滤器
<!-- 格式过滤器 -->第一种方法:<wxs module="filter"> var formatDate = function(item) { if (item) { return item.slice(0, -3) } else { return '' } } ...原创 2018-10-16 14:32:01 · 4803 阅读 · 0 评论 -
微信小程序开发常用——授权
/*** 生命周期函数--监听页面加载 onLoad*/let userInfo = app.globalData.userInfoif (!(!userInfo && typeof userInfo != "undefined" && userInfo != 0)) { this.setData({ userInfo,...原创 2020-07-20 14:07:20 · 414 阅读 · 0 评论 -
微信小程序——image图片自适应宽度比例显示的方法
微信小程序的组件image是用来显示图片的,它有一下几个属性:1、src 图片资源地址2、mode 图片裁剪、缩放的模式3、binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}4、bindload 当图片载入完毕时,发布到...转载 2018-10-15 11:56:02 · 7834 阅读 · 0 评论 -
微信小程序——返回上个页面带参数
当前页面:var pages = getCurrentPages(); //当前页面var prevPage = pages[pages.length - 2]; //上一页面prevPage.setData({ //直接给上一个页面赋值 addresschose: that.data.address[index],});wx.naviga...原创 2018-09-30 17:15:15 · 8965 阅读 · 4 评论 -
微信小程序 自定义二维picker组件(省市)
html:<view class="section"> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" ...原创 2018-09-30 16:56:50 · 2304 阅读 · 2 评论 -
微信小程序 --- 常见问题
1. < text/> 组件内只支持 <text/> 嵌套。不支持嵌套image组件,不然图片显示不出来2. setData()回调传递的问题3. scroll-view 点击相应盒子,以动画的形式移动到索引的位置添加属性scroll-into-view=“{{ toIndex }}”给每个盒子动态分配ID,索引的位置toIndex就...原创 2018-09-26 14:30:20 · 959 阅读 · 0 评论 -
微信小程序——手势事件
https://github.com/qbright/wx-touch-event转载 2018-10-15 13:56:42 · 2637 阅读 · 0 评论 -
微信小程序 --- 三级联动(省市区)
优化:以code作为唯一标识,避免相同的地区造成混轮 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" ...原创 2019-07-14 13:31:55 · 1385 阅读 · 4 评论 -
微信小程序 -- 小程序授权登录流程图
简化图:原创 2019-08-15 16:05:50 · 4713 阅读 · 1 评论 -
微信小程序 -- 获取页面URL或参数
1.获取当前页url/** * 获取当前页url */const $getCurrentPageUrl = () => { let pages = getCurrentPages() // 获取加载的页面 let currentPage = pages[pages.length - 1] // 获取当前页面的对象 let url = currentPage.rout...原创 2019-08-09 16:41:06 · 9203 阅读 · 0 评论 -
微信小程序 -- 获取自定设备参数
/** * getSystemInfoSync [获取系统信息(同步版)] Promise 封装 */const $getSystemInfoSync = () => { return new Promise((resolve, reject) => { try { const res = wx.getSystemInfoSync() re...原创 2019-08-09 16:26:31 · 543 阅读 · 0 评论 -
小程序 -- UI框架
iView Weapp:https://weapp.iviewui.com/docs/guide/startVant Weapp:https://youzan.github.io/vant-weapp/#/intro原创 2019-08-08 16:10:28 · 734 阅读 · 0 评论 -
微信小程序 -- 自定义进度条
效果: <view class='progress-block'> <text wx:if="{{ count < 5 }}">{{ count }}/5</text> <image src='http://dtsimg.dinghu.com/xcx/try_drink/mine_icon_finish@2x.png...原创 2019-07-17 17:01:56 · 2098 阅读 · 2 评论 -
微信小程序 -- textarea
解决微信小程序 textarea 层级高的问题:01. 若是 textarea 挡住弹窗,则当弹窗显示的时候,隐藏 textarea02. 若是 textarea 挡住固定在页面的内容,则使用<cover-view><cover-view>包住该内容,使其置于页面最高等级...原创 2019-07-29 16:54:36 · 179 阅读 · 0 评论