微信小程序学习笔记
学习微信小程序
闲来无事垂钓
~
展开
-
小程序接口封装、异步加载、Promise
小程序封装接口请求,小程序利用Promise封装接口,便于统一管理控制,实现小程序异步加载async、await数据原创 2023-02-14 10:26:31 · 896 阅读 · 1 评论 -
小程序组件引用、子父组件传值、监听等详细介绍、component、observers
小程序组件引用、子组件给父组件传值、父组件给子组件传值、数据监听observers等详细介绍原创 2023-02-07 17:30:09 · 3178 阅读 · 0 评论 -
获取小程序生产、开发、体验等环境、版本信息、appid等信息
动态区分小程序环境、获取小程序生产、开发、体验等环境;版本、appid、信息等原创 2022-12-18 11:05:53 · 1893 阅读 · 0 评论 -
微信小程序关于header/json格式请求接口
最近写微信小程序时,请求接口,发现会有一点问题,要么请求不到接口,要么提示不是json格式有时候请求接口发现怎么也请求不到,发现是少了headervar 参数={ 值:1, 值2:2}wx.request({ url:请求接口 data:参数, method: "post",})官方文档https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.reque..原创 2020-07-09 14:42:10 · 6088 阅读 · 0 评论 -
微信小程序自定义组件、组件应用、插槽、slot
自定义组件、组件应用、插槽、多插槽原创 2022-08-12 09:46:14 · 533 阅读 · 0 评论 -
access_token/生成小程序码/图片流转换图片
获取access_token,生成小程序码,小程序buffer转图片原创 2022-07-11 10:44:48 · 810 阅读 · 0 评论 -
微信小程序登陆\code详解
微信小程序登陆获取code并解析openid、unionid等详解原创 2022-07-07 13:55:39 · 5480 阅读 · 2 评论 -
关于小程序 页面刷新
需求遇到个页面刷新问题,A个人中心 B登录 C业务 3个页面场景:从A个人中心wx.navigateTo 进去登录页 ,登录完直接跳转wx.redirectTo 进入 C业务页面,在C页面,自带左上角返回 回到A个人中心,这时A页面居然是未登录的状态,要如何实现刷新?刷新方式一:(如果不涉及参数可以用这个,涉及参数用方式二、三)//在A个人中心页面onShow: function(){ this.onLoad();}//结果:可以刷新,但页面会丢失参数方式二...原创 2021-09-10 10:51:18 · 472 阅读 · 0 评论 -
小程序与小程序之间相互跳转、传值、接收参数、navigator、navigateToMiniProgram
小程序之间相互跳转,navigator 、wx.navigateToMiniProgram 唤起打开另一个小程序、小程序接收另一个小程序传参,小程序接收extra-data 参数原创 2021-07-26 18:09:04 · 13318 阅读 · 1 评论 -
微信小程序返回弹出提示
一进入页面 激活弹窗guanwonLoad: function (options) { wx.enableAlertBeforeUnload({ message: "返回上页时弹出对话框", success: function (res) { console.log("成功:", res); }, fail: function (err) { console.log("失败:",原创 2021-06-15 11:28:27 · 9202 阅读 · 2 评论 -
小程序云开发(二) 上传图片到云服务器、上传图片并展示
1、页面内先写好上传按钮<view style="width:80%;text-align:center;margin:0 auto;background:#ccc" class="upimgstyle" bindtap="uploadImgView">上传</view><!-- 下面这个是为了在页面展示图片 可以不加 --><view class="imgView"> <view class="imgs" wx:if="{{imglis原创 2021-06-03 16:22:41 · 3596 阅读 · 0 评论 -
微信小程序云开发学习(一)/ 设置云开发 与 数据查询
1、创建项目原创 2021-05-31 14:22:51 · 1243 阅读 · 0 评论 -
h5跳转小程序/判断是小程序打开h5还是微信浏览器打开h5
有时候小程序会引用一些wap页面,但是wap页面里有一些点击跳转的地方还是wap,我想让他在小程序里时点击跳转小程序。例如:列表页里的一个按钮#clickDetail,在wap站里点击跳转wap详情页,如果在小程序里点击就跳小程序详情具体如下 $('#clickDetail').on('click',function(){ if(!window.WeixinJSBridge||!WeixinJSBridge.invoke){ docume...原创 2020-08-11 10:08:34 · 3439 阅读 · 1 评论 -
存搜索历史/微信小程序搜索历史缓存到本地
做微信小程序列表时遇到搜索,要把搜索的记录存到本地利用 以下方式来存取wx.setStorageSync(string key, any data):string key本地缓存中指定的 key , any data是key对应的需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象wx.getStorageSync(string key) : string key本地缓存中指定的 key 返回值any data 就是key对应的内容具体详见微信...原创 2020-08-05 16:36:48 · 1501 阅读 · 0 评论 -
微信小程序锚点跳
点击导航 跳转到对饮的区域首先用小程序自带的锚点就需要用到scroll-view标签;默认给个初始值 从第一个开始 albumnIndex:0 ;接着获取当前点击的是第几个,也就是下标,把值重新赋值给 albumnIndex ,就是下面代码中albumtab 这个方法;还有一点很重要,内容部分要给高度,否则不起作用就是代码里.albumCon{width:calc(100%-64rpx);padding:032rpx;height:calc(100%-120r...原创 2020-07-03 18:31:38 · 550 阅读 · 0 评论 -
微信小程序双层循环获取外层索引值
小程序里有时候页面会有两层循环,第二层循环里怎么取到父级的index值呢,代码如下: <view wx:for="{{data}}" wx:key="index" class="albumConItem"> <view class="title">{{item.mainAlbumName}}</view> <view class="sty" > <image wx:for="{{item.phot原创 2020-07-03 18:18:16 · 7643 阅读 · 3 评论 -
微信小程序 星星评分展示 、半颗星星展示
数据结构如图右侧,展示效果如图左侧这里的星星规则是 小数点后一位 , 小于2 不变 ,大于2 小于8 是半颗星 , 大于8 进1先把星星的规则方法写了 starFn:function(scroe){//分数 星星 var _this=this; var str=scroe.toString().split('.'); var newArr=[]; // 0红星 1黑星 2半星 for(var i=0;i<str[0];i...原创 2020-06-16 10:34:57 · 1824 阅读 · 0 评论 -
微信小程序发布后部分用户不能及时更新问题
最新发布小程序,发现有一分部打开过小程序的页面代码不是最新的,针对这个问题查了一下一、小程序的运行机制小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」1、小程序没有重启的概念2、当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁3、置顶的小程序不会被微信主动销毁4、当收到系统内存告警也会进行小程序的销毁二、更新机制1、未启动时更新——(意味着微信客户端会在用户不在访问小程序期间,主动触发更新,最慢24小时内覆盖所有.原创 2020-06-12 13:55:46 · 11908 阅读 · 0 评论 -
微信小程序 picker 自定义数组/对象数组
文件.wxml<view class="section"> <view class="section__title">自定义普通选择器</view> <picker bindchange="bindPickerChangeCity" mode="selector" value="{{cityArray.name}}" range-key="...原创 2020-04-07 15:33:03 · 7061 阅读 · 1 评论 -
小程序cover-view 标签 字被截掉的坑
小程序中用到map组件时只能用cover-view标签覆盖在地图上,但是会有一个问题,字会被截掉一部分,加marging、padding都不好使解决办法设置一个字体font-family:-apple-system; 就可以了或者在两边加个空标签占位置.kong{display:inline-block;width:10rpx;line-height:25rpx;}...原创 2020-03-06 14:40:01 · 1202 阅读 · 2 评论 -
微信小程序给用户的更新提示
小程序每次发版后,用户的手机页有缓存,需要手动删除掉小程序在重新搜索打开缓存才会清掉,如果不删要等上一段时间,具体多久还没试过,但是用户并不知道你的小程序更新了,所以给用户一个提示app.jsApp({ var updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (r...原创 2019-12-27 13:31:40 · 878 阅读 · 0 评论 -
微信小程序——向后台接口传数据,前后台数据交互
假如有2个参数的值要传给后台接口,还有一个参数要传给后台,从后台返回在获取这个值name 和tel 的值是要直接传给接口的,timeId的值传给接口,并把接口返回来的值重新赋给timeIddata: { name:'', tel:'', timeId:1}给接口传值wx.request({ url:'接口地址', header: { ......原创 2019-11-06 14:37:34 · 21408 阅读 · 5 评论 -
微信小程序——自定义导航组件实例
1、首先先自定义顶部导航组件topMenu,一下是目录结构,component下都是自定义的组件index首页 city 城市页 sale 列表页2、topMenu.jsconst app = getApp();Component({ /*** 组件的属性列表*/ properties: { pageName: String, ...原创 2019-10-29 11:02:36 · 2582 阅读 · 0 评论 -
微信小程序——五种页面跳转
wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack一、wx.switchTab(Object object),跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面url :需要跳转的 tabBar 页面的路径(需在 app.json 的tabBar字段定义的页面),路径后不能带参数。...原创 2019-10-21 14:44:32 · 552 阅读 · 0 评论 -
小程序page里的js比app.js方法先执行时处理方法
新手最近写百度小程序遇到一个问题,写微信小程序时没注意有这个问题,在app.js里定义一个全局变量,又写了一个获取地理位置的方法,然后在index.js里获取这个全局变量的值,结果怎么都获取不到,发现控制台里index.js先执行了 ,之后app.js才执行的解决办法app.jsApp({ globalData: { url_host:'https://b...原创 2019-10-16 16:38:57 · 3418 阅读 · 2 评论 -
微信小程序——设置默认启动页
小程序默认展示的页面和app.json配置的路径顺序有关,第一个配置是哪个页面路径 默认就展示哪一个页面原创 2019-10-14 15:17:24 · 3160 阅读 · 0 评论 -
微信小程序 选项卡(数据双层循环)
第一种:swiper选项卡,可点击可滑动(swiper自带了一个150的高度,高度不好控制)html<!-- 选项卡 --><view class='topTabSwiper'><!-- 从接口获取数据写法 index是小程序自带的可以直接用 <view class="tabbox" wx:for="{{detail_data.copywri...原创 2019-06-22 11:49:12 · 2281 阅读 · 0 评论 -
微信小程序(一)预览测试
当做完一个小程序页面后,怎么在手机查看1、先申请AppIDhttps://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html2、添加好自己的项目,在把刚申请的AppID填写进去3、预览,点击预览会自动生成二维码,用微信扫一下就可以再手机查看了4、如果报错,提示不合法,就把提示的那个链接加入...原创 2019-05-29 14:17:02 · 1183 阅读 · 0 评论 -
微信小程序(四)json数据循环展示
html部分<view class='list-head'>列表测试</view><view class='list-box'> <view class='list-li mflex' wx:for="{{list_data}}" wx:key="index" > <view class='list-img'...原创 2018-07-25 13:29:52 · 16517 阅读 · 6 评论 -
微信小程序(三)关于image的自适应/动态获得图片高度
微信小程序里图片自适应宽高,image有自带的缩放模式纯css自适应高度 图片上加个属性mode="widthFix" 就可以<image class="test" mode="widthFix" src="/img/picture/705781.jpg"></image>.test{width:300rpx;height:auto;}还有一些其他...原创 2018-07-19 17:53:54 · 9534 阅读 · 0 评论 -
微信小程序(二)新页面跳转
在json配置路径,会自动生成对应的css\js\json(例如:test.wxss\test.js\test.json)页面跳转两种方法 一种通过js,一种通过页面第一种:在要点击跳转的标签上加事件,3步,如:1、要在点击文字上跳转<view bindtap="toast"><text>点我跳转</text></v...原创 2018-07-06 17:39:38 · 4212 阅读 · 0 评论 -
微信小程序——自定义分享与右上角分享
jsonShareAppMessage: function (res) { //可以先看看页面数据都有什么,得到你想要的数据 var shareData = this.data console.log(shareData) if (res.from === 'button') { // 来自页面内转发按钮 return { title: "标题", des......原创 2019-06-22 12:02:51 · 10325 阅读 · 3 评论 -
微信小程序——焦点图 可预览查看大图缩放(多张可左右滑动) 带页码 loading 加载中 / https不显示图
微信小程序焦点图,可以滑动预览大图缩放微信小程序自带焦点图swiper ,但是没有页码,只有小圆点,所以要自己写(在查看大图时遇到一个问题,安卓上查看大图部分图不显示,经排查,发现不显示的图片地址是https,http的图片就没问题,上网搜,有的说是安卓证书的问题,有的说是域名问题,最终我也没确定是什么问题,有知道的可以告诉我~,我的最终解决办法是用replace把https全都替换成ht......原创 2019-06-22 12:17:56 · 2458 阅读 · 0 评论 -
小程序列表页分页获取数据,下滑加载更多
页面代码<view class="fp_box"><!--等待框--><view class="load_style" hidden="{{!loading}}"> <image src="/img/common/load.png"></image> <view>加载中...</view>...原创 2019-07-04 17:30:13 · 4596 阅读 · 0 评论 -
微信小程序页面相互传参/链接传参/本地缓存/全局变量/反向传值
A页面 和 B页面(a传值给b)基本的页面目录和配置一、通过缓存传递参数wx.setStorageSynca页面(传值的页面)<!--pages/a/a.wxml--><view bindtap="tiaozhuan">A页面</view>jsonLoad: function (options) {},tiaozhuan...原创 2019-07-18 16:26:31 · 1206 阅读 · 0 评论 -
小程序富文本rich-text、数组拼接、 包含特殊符号处理
先说一下rich-text的实现,很简单html<rich-text nodes="{{myrich}}"></rich-text>js 注意:里面不能用view 否则运行不出来,可以用html的标签,详细见文档 https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html......原创 2019-08-20 11:07:55 · 7106 阅读 · 0 评论 -
微信小程序——创建组件及引用
一、先新建组件文件夹,如果有多个组件,创建一个组件目录component,我这里就一个组件,就不单独放一个目录了在pages下右键创建nav组件目录,在nav目录右键新建组件 ,组件文件navigation二、配置组件首先是navigation.json文件 component:true{ "component": true, "usingCompone......原创 2019-09-26 09:35:56 · 2184 阅读 · 0 评论 -
微信小程序——引入第三方图标、图标组件
这里以Iconfont 为例https://www.iconfont.cn一、直接引用创建一个图标项目,名字自定义,我的是fontIcon,注意项目的 前缀 和font family两处自己定义的名字 ,后面会用到;选中Unicod,选择下载至本地,里面包含很多文件,找到iconfont.css,把里面的内容复制到全局里 app.wxss,如果不想放到app.wxss里,可以直接...原创 2019-09-26 17:33:34 · 3315 阅读 · 0 评论 -
微信小程序——自定义导航组件
一、先新建a页面 和 b页面,a页面可以跳转到b页面二、创建导航组件我这里是pages/nav/navigation文件1、navigation.wxml (myIcon 是我自己定义的图标组件,如果没有可以换成自己的view标签或者图片标签 , 或者可以看上一篇创建图标组件的博文 https://blog.csdn.net/qq_39109182/article/details...原创 2019-09-27 17:34:54 · 994 阅读 · 0 评论 -
微信小程序(五)扫码唤醒微信小程序拨打电话
通过扫微信小程序生成的二维码,唤醒微信小程序,打开相应的页面,打电话1、微信小程序的二维码是后台接口生成的2、打电话html部分<view class='btn' bindtap='tel' id='{{peoplelist.mobile}}'><text>打电话</text></view>js部分var app = ge......原创 2018-07-11 17:47:39 · 4355 阅读 · 0 评论