微信小程序
菜鸟从空中飞过
嘻嘻的妙妙屋
这个作者很懒,什么都没留下…
展开
-
【微信小程序】页面跳转传递参数(实体,对象)
场景在一个列表中点击了某个 item,跳转到详情界面,那么我就需要把 item 的实体数据从列表页面传递到详情页面。实现方法那么我们来看看微信小程序给我们提供的API:这里大家可以清楚看到 api 中说到的如何传递参数,其实它这里指的参数仅仅是一些普通的数据类型,我们要传递的实体是 object 类型,那么我们需要先把实体转成 string 类型进行传递,在详情页面接受到在逆向转成实体,如下面这段示例:/** * 进入文章详情界面 */gotoArticleDetail: function原创 2022-01-11 15:32:43 · 3899 阅读 · 1 评论 -
【微信小程序】微信公众平台合法域名设置
进入微信小程序公众平台:进入设置:添加即可:如果有文件的上传或下载也需要填写 uploadFile 和 downloadFile 的合法域名;最后进入微信开发者工具查看合法域名是否成功:搞定!原创 2021-11-24 20:19:43 · 4763 阅读 · 1 评论 -
【微信小程序】JavaScript 从数组中删除指定值元素的方法封装
效果const somearray = ["mon", "tue", "wed", "thur"]removeByValue(somearray, "tue");//somearray will now have "mon", "wed", "thur"方法在 src/utils/util.js 中定义函数 removeByValue 进行元素删除:function removeByValue(arr, val) { for (let i = 0; i < arr.length; i原创 2021-11-18 11:20:34 · 705 阅读 · 0 评论 -
【微信小程序】悬浮按钮
效果需要制作一个如下图右下角的悬浮按钮:代码index.wxml<!-- 发布悬浮按钮 --><view class="releaseBtn" bind:tap="gotoRelease"> <image class="releaseIcon" src="/images/pen.png" /></view>index.scss// 发布悬浮按钮.releaseBtn { position: fixed; bottom: 50p原创 2021-11-18 11:00:39 · 3616 阅读 · 0 评论 -
axure-chrome-extension 插件安装
场景在我们收到axure-chrome-extension画的界面,通过浏览器无法打开时,在网上又无法找到安装包;安装方法我们打开页面原型的路径下的 resources 的 chrome 目录里面有 axure-chrome-extension.crx复制一份更名为 rar解压之后打开谷歌浏览器打开扩展程序添加扩展程序后面就能正常访问页面原型了下载地址附带插件下载地址 ,按照上面的方式即可安装:https://files-cdn.cnblogs.com/f原创 2021-11-09 14:55:20 · 308 阅读 · 0 评论 -
【微信小程序】上传头像
效果代码editInfo.js// pages/editInfo/editInfo.jsPage({ /** * 页面的初始数据 */ data: { dataList: [] }, /** * 获得图片本地路径 */ chooseWxImage: function () { const that = this; wx.chooseImage({ // 最多可以选择的图片张数 count: 1,原创 2021-11-07 17:00:16 · 2545 阅读 · 0 评论 -
【微信小程序】用 setData 方法修改 data 中对象数组某一项的属性值
方法先用一个变量表示对象的属性值(字符串)或数组的某一项的值(字符串拼接起来);将变量写在[]里面即可修改;代码index.jsPage({ data: { // 普通: text1:1, // 对象的属性值: text2:{ text2_1:2, }, // 数组: text3:[3,3,3], // 数组和对象结合: text4:[ { bool:false,原创 2021-11-07 16:28:44 · 2293 阅读 · 0 评论 -
【微信小程序】在组件中刷新页面
代码在组件页面的 js 对应的函数中加入:const page = getCurrentPages().pop(); //当前页面if (page == undefined || page == null) return; page.onLoad(); //或者其它操作原创 2021-11-06 20:25:10 · 652 阅读 · 1 评论 -
【微信小程序】div 标签内实现垂直居中
效果代码index.wxml <van-button class="btn" size="large" type="primary" bind:tap="getUserInfo"> <div style="display: flex; flex-direction: row; justify-content: space-around;"> <image src="../../images/wechat.png" style="width: 40rpx原创 2021-11-02 22:18:00 · 900 阅读 · 0 评论 -
【微信小程序】给后台返回的对象数组每个对象添加指定新属性
效果后台返回数据:添加属性后数据:说明auto 与 seeMore 属性是在请求到后台的数据后逐条添加的;代码主要补充的是页面加载时 js 中的初始化数据方法部分:Component({ /** * 组件的属性列表 */ properties: { // 定义一个list数组对象接收父组件传的数据 list: { type: Array, value: [] }, scene: { type: Stri原创 2021-11-01 16:17:32 · 1838 阅读 · 0 评论 -
【微信小程序】解决view标签内的文本不能自动换行问题
情景一行文字太多,用 view 标签包裹时,超出屏幕;解决方法简单粗暴<view style=“overflow-wrap: break-word;”>123213123123213213213213213213213213213213213211232131231232132132132132132132132132132132132112321312312321321321321321321321321321321321321</view>...原创 2021-10-31 11:35:14 · 1528 阅读 · 0 评论 -
【微信小程序】下拉刷新与上拉加载
效果方法在 scroll-view 里设定 bindscrolltoupper 和 bindscrolltolower 实现微信小程序下拉;(本文使用此方法)onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新;代码index.wxml<scroll-view scroll-top="{{ scrollTop }}" scroll-y="true" style="height:{{ scrollHeight }}px; " class="li原创 2021-09-23 16:51:38 · 515 阅读 · 0 评论 -
微信小程序组件库 Vant weapp 的使用
项目初始化第一步新建一个云开发的小程序项目:把不需要的东西都删掉:将 index.wxss 、index.wxml 、index.js 、app.wxss 清空,初始化 index.js:Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染原创 2020-08-12 19:30:10 · 339 阅读 · 0 评论 -
【微信小程序】使用函数防抖与函数节流
函数防抖和函数节流都是老生常谈的问题了。这两种方式都能优化 js 的性能。有些人可能会搞混两个的概念。概念函数防抖函数防抖: 英文 debounce 有防反跳的意思,大致就是指防止重复触发。那么,函数防抖,真正的含义是:延迟函数执行。即不管 debounce 函数触发了多久,只在最后一次触发 debounce 函数时,才定义 setTimeout,到达间隔时间再执行 需要防抖的函数。用处:多用于 input 框输入时,显示匹配的输入内容的情况。函数节流函数节流: 英文 throttle 有节流原创 2021-08-31 11:50:20 · 809 阅读 · 1 评论 -
【微信小程序】微信支付
简介微信的支付方式有以下几种,不同的支付方式适用于不同的支付场景,而本文讲的就是 小程序支付 方式:说到支付功能就要涉及到金钱交易,必定是有比较严格的规范及流程,如要求小程序必须具备企业性质,必须拥有微信支付商户平台的账号;PS:申请微信支付商户平台需要一个微信小程序或公众号等,建议按照以下流程进行操作准备工作申请微信小程序账号· 申请成功可拿到 AppID(小程序 id)和 AppSecret(小程序密钥);· 申请类型为企业性质,否则无法接入微信支付;微信小程序认证通过认证的小原创 2021-09-16 13:31:32 · 929 阅读 · 2 评论 -
【微信小程序】音乐播放器
场景使用微信小程序实现一个简易的音乐播放器:Github地址效果虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能)。主要实现的功能有:实现音频播放,暂停;实现拖拽进度条,快进音频进度;实现上一首,下一首,列表循环播放;实现关闭小程序,也可在后台播放,正式版需要通过审核,开发版本可正常测试;代码index.js数据初始化 /** * 页面的初始数据 */ data: { playStatus: true, audioIn原创 2021-08-31 12:14:26 · 3535 阅读 · 0 评论 -
【微信小程序报错解决方法】TypeError: Cannot read property ‘setData‘ of undefined
场景自己在调用 wx.getSystemInfo({}) 时,开发工具自动补全了代码。在 success 回调中按照以往的写法调用 this.setData({ }); 时,报错:TypeError: Cannot read property 'setData' of undefined。相关代码如下: /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.getSystemInfo({ success:原创 2021-08-14 17:51:39 · 28071 阅读 · 6 评论 -
【微信小程序】页面跳转的四种方式
wx.navigateTo(OBJECT)这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面”类似于html中的 window.location.href=" "wx.navigateTo({ url: 'test?id=1'})实际效果如下:小程序中左上角有一个返回箭头,可返回上一个页面;也可以通过方法 wx.navigateBack 返回原页面;wx.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。类似于html中的 wi原创 2021-08-06 17:59:14 · 8824 阅读 · 0 评论 -
【微信小程序】全局变量的定义与使用
全局变量的定义在你初次打开 app.js 文件时,很容易混淆。在 onLaunch 函数里是有个 globalData 对象,但请注意,你的全局变量不是写在这里,而是另外在函数外定义一个 globalData。例如下图:globalData 一定要定义在与函数同级的位置。然后在globalData 里面编写你的全局变量的值。全局变量的赋值一般初始化的时候会给空值或者固定值,然后通过后期的小程序使用过程中改变全局变量。全局变量值得改变有两个地方。一是在 app.js 文件中改变。二是在其他 js原创 2021-08-31 11:18:39 · 15073 阅读 · 0 评论 -
【微信小程序】用户授权以及判断登录是否过期的方法
实现效果场景在打开小程序时判断用户是否过期(如果未过期则重新登录),然后获取用户信息,进而在前台显示;主要实现两个功能:判断登录是否过期,如果过期则就重新登录,如果没过期就提示未过期;获取用户的信息,并在前台显示;代码要实现在打开小程序时判断用户是否过期,则需要把代码写到 app.js 里:// app.jsApp({ async onLaunch() { // 验证登录是否过期 wx.checkSession({ success: func原创 2021-08-15 19:50:03 · 3706 阅读 · 0 评论 -
【微信小程序】本地缓存保持登录状态之 wx.setStorageSync() 使用技巧
简介微信小程序提供了一个如同浏览器 cookie 本地缓存方法,就是 wx.setStorageSync() 。注意,该方法是同步请求,还有个异步请求的方法是 wx.setStorage(),参考官方文档。取出本地缓存方法 wx.getStorageSync,同样的,它也是同步请求,它也有一个异步请求方法 wx.getStorage()。使用方法登录时候,将所需要存的字段存入本地缓存中:// pages/daily/daily.js// 获取本地缓存中的TOKENconst TOKEN =原创 2021-08-31 16:42:06 · 12173 阅读 · 0 评论 -
小程序基础与实战案例
小程序开发工具与基础小程序开发准备:申请小程序账号( appid )下载并安装微信开发者工具具体步骤如下:先进入 微信公众平台 ,下拉页面,把鼠标悬浮在小程序图标上然后点击 小程序开发文档照着里面给的步骤,就可以申请到小程序账号了。然后就可以下载 开发者工具 了下载完打开后的界面就是这个样子下面让我们来新建一个小程序开发项目:在AppID输入自己刚刚注册的AppID就可以,或者使用测试号,创建后的页面是这样的:编写第一个小程序页面包括的知识点有:小程序文件类型原创 2020-05-30 14:07:48 · 401 阅读 · 0 评论 -
云开发小程序项目实战 一
小程序传统开发模式云开发模式什么是Serverless?云开发与 Serverless什么是小程序云开发?云开发优势与基础能力云开发优势快速上线专注核心业务独立开发一个完整的微信小程序不需要学习新的语言,只需要掌握 Javascript无需运维,节约成本弹性伸缩数据安全云开发基础能力云开发开通及控制台功能先新建一个云开发项目:点击左上角的云开发按钮就能进入控制台了:代码结构初始化把调试基础库的版本改为最新:然后把环境ID填入代码中:打开 ap原创 2021-03-29 23:34:01 · 211 阅读 · 2 评论 -
【微信小程序】获取手机号
场景在小程序开发中,获取用户信息、获取手机号是最常用到的功能。官方文档说明如下:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html效果代码demo.json:初始化json文件{ "usingComponents": {}}demo.wxml:初始化布局文件<button type="warn" open-type="getPhoneNumbe原创 2021-09-12 20:33:58 · 346 阅读 · 0 评论 -
【微信小程序】手机号码解析失败解决方法
场景在小程序开发中,获取用户信息、获取手机号是最常用到的功能。但是有时可能会遇到“手机号解析失败”的问题,这个时候我们检查下代码是否是在获取手机号的回调中才调用的 wx.login 的方法。官方文档说明如下:解决方法所有解决办法是提前调 wx.login,在获取手机号的回调方法中取检验登录状态,代码如下:onLoad: function (options) { wx.login({ success: res => { that.setData({原创 2021-08-15 20:05:23 · 2705 阅读 · 0 评论 -
【微信小程序】报错解决方法[TypeError: N.length is not a function]
解决方法N.length() 后面的括号去掉;原因分析N.length 是属性不是方法,不能在后面加括号执行;原创 2021-09-12 10:54:13 · 1829 阅读 · 0 评论 -
【微信小程序】实现新闻列表(文字垂直居上、垂直居下)
新闻列表效果相关原理CSS 的 absolute 定位值得注意的是,绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>;代码demo.wxml<!--pages/demo/demo.wxml--><view class="home-block"> <!-- 每日文章 --> <view class="article-block" wx:for="{{ ArticleList原创 2021-08-25 13:44:58 · 4890 阅读 · 5 评论 -
【微信小程序】wx.login 和 wx.getUserProfile 同时使用问题
场景在使用微信登录时,通常会在调用 wx.login 获取 code 后再通过 wx.getUserProfile 获取 iv 和 encryptedData (加密数据)一起发到后端进行登录验证;但是,在实际使用中如果在 wx.login 方法调用后再调用 wx.getUserProfile 会报错;官方解释也就是说,不能在调用方法的回调中使用 wx.getUserProfule();解决方法使用Promise.all()方法实现平级调用;Promise.all() 方法接收一个 pro原创 2021-08-14 18:17:44 · 3270 阅读 · 5 评论 -
【微信小程序】判断手机号是否合法
场景在注册页面输入手机号,在请求注册接口前先行判别输入的手机号码是否合法;效果代码导入 vant-weapp 组件:user-register.json{ "usingComponents": { "van-cell-group": "@vant/weapp/cell-group/index", "van-field": "@vant/weapp/field/index", "van-dropdown-menu": "@vant/weapp/dropdown-menu/原创 2021-09-12 13:07:03 · 3681 阅读 · 3 评论 -
【微信小程序】字符超出一定长度变成省略号显示
效果代码.item-content {width: 120rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}宽度需要设定;原创 2021-08-24 14:44:32 · 1465 阅读 · 0 评论 -
微信小程序 vant-weapp 实现多选标签
配置 vant-weapp步骤见:https://jessieeeeee.xyz/2020/08/12/vantweapp-install/demo.json记得在 json 文件中引用 vant-weapp 的 tag 组件:{ "usingComponents": { "van-tag": "@vant/weapp/tag/index" }}demo.wxml在 wxml 文件中搭建页面基础结构:<!--pages/demo/demo.wxml-->&l原创 2021-08-06 14:16:12 · 1625 阅读 · 0 评论 -
云开发小程序项目实战 二
首先,我们先把全局的颜色样式设置好:然后把 app.wxss 文件以及 style 目录下的 guide.wxss 文件中的内容清空;轮播图组件原创 2021-03-30 15:23:37 · 422 阅读 · 2 评论