![](https://img-blog.csdnimg.cn/20200825154202182.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
小程序
小程序常见的一些问题以及常用的知识点!
前端攻城狮路飞
正真的大师永远都怀着一颗学徒的心。
展开
-
微信小程序打开微信H5页面,体验版可打开,生产环境访问失败,无法访问该页面
这里的校验文件只需要放在域名根目录下即可,比如我们要访问https://www.baidu.com,那校验文件就放在https://www.baidu.com/testFile.txt,这个校验完成后我们就可以访问此域名下的网页了,比如https://www.baidu.com/h5/index,或者https://www.baidu.com/test_h5,在绑定了域名,子域名都可以访问的,还有不明白的可以在下方留言。解决办法,在小程序后台找到开发管理,开发设置,往下拉,找到业务域名配置。原创 2023-02-08 09:41:24 · 4133 阅读 · 6 评论 -
通过weixin://dl/business/?t=打开微信小程序
通过weixin://dl/business/?t=打开微信小程序,我这里用的uni-app,所以请求用的uni.request,其他的同理,比如ajax和axios,不多赘述。原创 2023-02-07 14:17:34 · 57067 阅读 · 4 评论 -
微信小程序实现分页加载,触底加载下一页,滚动加载
这里我就不写wxml了,就是一个列表循环,直接看js代码逻辑,注释都写在代码后面了,这个方法可以实现无限滚动加载,直到加载完最后一条数据,也可以实现触底没数据后,二次触底可以从新加载刷新,学废了就给个三联把,感谢! data: { orderList: [], pageSize: 10, pageNum: 1, }, /** * 上拉触底 onReachBottom微信自带的触底函数 */ onReachBottom: function () {原创 2022-03-31 16:47:21 · 3444 阅读 · 0 评论 -
echarts曲线图添加辅助线标记线,x轴自定义刻度线
我加刻度线主要是为了方便看数据是否超过了最低和最高的标准值,先看一下实现前和实现后的效果图吧:实现前:实现后:具体实现代码:series: [ { type: "line", markLine: { symbol: ["none", "none"], //去掉箭头 itemStyle: { normal: { lineStyle: { type: "dashed", //线条样式原创 2021-03-11 17:20:57 · 9503 阅读 · 2 评论 -
手机浏览器打开微信小程序,支持外部浏览器跳转到小程序
第一步生成小程序的跳转链接,进入微信公众平台,找到工具,生成跳转用到的URL 如下图:参数可以不用传,点击生成后,复制链接,放在微信聊天记录里面可以直接点击打开,也就是说在微信环境内可以打开,微信H5也可以,如下图:点击连接后放在外部浏览器中打开,直接给一个超链接:点我去微信小程序,这个链接在网页中任何一个地方都可以,亲测有效。点击后会如下图:先点击取消程序,页面下方会出现跳转链接,点击后直接打开微信然后自动打开小程序学废了记得点个三联哦·~~~......原创 2022-03-26 14:02:57 · 22302 阅读 · 6 评论 -
微信小程序分享到朋友圈onShareTimeline()传参及接参
代码如下:// index.js onShareTimeline: function () { return { title: '我是分享后显示的标题', // 可不填 query: 'id=123', // 可不填 传递的参数,只能是这种格式 imageUrl: 'https://www.baidu.com/my/active3.png' // 可不填,可以是网络路径也可以是本地路径,分享到朋友圈显示的图标 } }, /原创 2022-03-26 10:01:47 · 6519 阅读 · 1 评论 -
微信小程序打开授权位置信息界面,拒绝授权后用户手动点击后打开
就是如下这个页面,在小程序内点击后进入这个页面,用户设置完定位授权后,返回小程序可以拿到授权结果。是拒绝还是同意,然后进行相应的操作WXML:<view class="btn tx-14" catchtap="getAddres">位置授权</view>JS:getAddres() { let that = this; wx.openSetting({ // 打开设置界面 success: res => { if (res原创 2022-01-17 13:49:08 · 1476 阅读 · 0 评论 -
微信小程序wx.getLocation获取用户位置信息不准确解决办法
先看问题,在看解决办法:图中小点是正确定位信息,图中红色框框为偏移的定位信息,就是wx.getLocation获取的定位和用户本身位置不一样有偏移,解决办法很简单,两行代码搞定;isHighAccuracy: true,type: ‘gcj02’,加上这两个属性,完美解决:wx.getLocation({ isHighAccuracy: true, // 开启地图精准定位 type: 'gcj02', // 地图类型写这个 success: res =&g原创 2021-12-17 17:00:28 · 7187 阅读 · 10 评论 -
微信小程序通过weixin://wxpay/bizpayurl生成支付二维码
其实很简单,我开始也觉得复杂,目的很明确,后端返回前端一个短链接weixin://wxpay/bizpayurl?pr=sZz****,前端生成一个支付二维码,扫码可以直接调起微信支付,上代码:这是最后生成的效果图,扫码可以直接支付,显示支付金额:wxml:<view> <canvas style="width: 400rpx;height: 400rpx;" canvas-id='canvas'></canvas></view>js:var原创 2021-11-02 15:57:33 · 162377 阅读 · 15 评论 -
微信小程序隐藏scroll-view的滚动条
先来看一下解决办法的代码:直接在页面或者全局加上以下代码即可:::-webkit-scrollbar { display:none; width:0; height:0; color:transparent;}这是没有修改之前的效果,下面是修改之后的效果原创 2021-10-11 09:28:53 · 345 阅读 · 1 评论 -
小程序接口请求报错request:fail -300:net::ERR_INVALID_URL
看看报错信息:我的是合法域名,这个报错找了很多办法,最后解决了,把孩子高兴坏了,来解救一下众生!下面是我的http请求代码:function getProject(data) { // 获取项目 return fetch(baseURL + "/project", "GET", data)}出现这个问题可能有三个原因:1)反斜杠是复制的,把斜杠删掉,自己从新打一个试试2)引号照成的问题,不知道为啥,就是会有这个bug,把单引号统一换成双引号(我自己的问题是这样解决的)3)如果双引号还是原创 2021-09-28 16:56:57 · 3299 阅读 · 0 评论 -
微信小程序获取用户头像并显示出来,很简单一行代码搞定!
<open-data type="userAvatarUrl"></open-data>小程序提供的组件,可以自己获取用户头像并显示出来:效果图如下:原创 2021-08-13 16:05:24 · 7408 阅读 · 7 评论 -
小程序生成分享海报,带二维码可携带参数!
最近开发小程序遇到一个需求,后端提供一个二维码,携带分享参数,前端来生成一个分享海报,下面是部分截图这里我就只说一下点击生成海报的方法,这里调用了第三方插件,直接下载,下载直通车代码下载好了,直接拷贝到自己的项目目录,我是这样放的miniprogram_dist就是下载好的组件包在需要的页面引入组件JSON文件引入组件{ "usingComponents": { "poster": "/miniprogram_dist/poster" }}WXML<view&g原创 2021-07-03 10:14:02 · 1236 阅读 · 4 评论 -
微信小程序获取小程序appId,当前小程序版本号,当前小程序版本!
获取小程序的appid,获取小程序的当前版本号,直接调用wx.getAccountInfoSync(),直接上代码:微信官方文档直通车let accountInfo = wx.getAccountInfoSync(); let appid = accountInfo.miniProgram.appId; // "wxfb6368d158c85cb7"小程序appidlet envVersion = accountInfo.miniProgram.envVersion; // "develop"开发版原创 2021-07-01 10:35:43 · 4995 阅读 · 1 评论 -
微信小程序拨号功能,调起手机拨号!
微信官方文档直通车!方法也很简单,直接调用wx.makePhoneCall({}),如下图,phoneNumber就是电话号码,触发call方法后,会直接跳转到拨号页面,如下图call() { // 打电话 let phone = "13123123123" // 仅为示例,并非真实的电话号码 wx.makePhoneCall({ phoneNumber: phone })}...原创 2021-06-29 09:53:08 · 5570 阅读 · 0 评论 -
微信小程序2021年经典面试题总结
1.小程序与原生App哪个好?小程序的优点:基于微信平台开发,享受微信本身自带的流量,这个是最大的优势无需安装,只要打开微信就能用,不占用用户手机内存,体验好开发周期短,一般最多一个月可以上线完成开发所需的资金少,所需资金是开发原生APP一半不到小程序名称是唯一性的,在微信的搜索里权重很高容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本上没有大问题;当然如果了解ES6+CSS3则完全可以编写出即精简又动感的小程序;基本上不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以原创 2021-06-25 18:01:53 · 3668 阅读 · 4 评论 -
小程序发布线上接口请求失败,开发者工具请求正常,体验版和开发版要打开调试才可以正常请求解决办法
遇到这样的问题一般都是域名或者服务器出了问题先打开小程序后台找到开发管理-开发设置,如下图看看你的请求路径是否在ip白名单中,这里可以填ip地址如127.11.11.11或者https://baidu.com,这样接口请求应该是没问题了,涉及到一些资源下载或者其他的还有问题接在下面配置,如图二,配置完可能有半个小时生效期,一般都是一两分钟就好了,如果还没有解决,控制台也没有其他报错信息,那就请移步百度!...原创 2021-06-24 15:50:28 · 5943 阅读 · 2 评论 -
微信小程序调起微信支付-附源码(前端)!
微信支付其实并不复杂,看下我的页面,点击下面的确认充值,即可调起微信支付,其实后台复杂一点,前端很简单:WXML<view class="tx-18" bindtap="postMoney">确认充值</view>JSpostMoney() { // 点击确认充值 wx.showLoading({ title: '加载中', }) let that = this app.http.getData({ //第一步请求后台接口,获取原创 2021-06-19 17:04:01 · 2033 阅读 · 2 评论 -
wx:for的使用,以及自定义item和index
wx:for语法,自定义item,index如下就是自定义item和index,直接使用items,indexs<view wx:for="{{List}}" wx:for-item="items" wx:for-index="indexs" wx:key="indexs"> {{items.name}}</view>wx:for默认语法如果没有自定义item和index的话默认就直接使用item,index就行了<view wx:for="{{List}}"原创 2021-06-19 16:14:25 · 3618 阅读 · 0 评论 -
微信小程序使用微信授权登录流程
官方文档我就不贴了,写那么多我也看不下去,直接说一下流程,第一步用户触发js方法,跳转到下面的授权登录界面,用户点击授权之后就会弹出图二,用户和点击拒绝或应许之后就看下面的js流程就好WXML<!--授权页面--><view wx:if="{{canIUse}}"> <view class='header'> <image class="my-img" src='../../image/icon/3.jpg'></ima原创 2021-05-18 09:13:15 · 1462 阅读 · 1 评论 -
微信小程序去掉button边框
button { margin: 0; padding: 0; background-color: inherit; position: static;} button:after { content: none;} button::after { border: none;}原创 2021-05-11 16:00:20 · 166 阅读 · 0 评论 -
微信小程序调用腾讯地图打开指定位置,源码!
toMap(e) { let map = e.currentTarget.dataset.map wx.openLocation({ //使用微信内置地图查看位置。 latitude: map.latitude, //要去的纬度-地址 longitude: map.longitude, //要去的经度-地址 address: map.address, //要去的详细地址 name: map.name //要去的建筑名称 }) },原创 2021-04-23 08:43:01 · 327 阅读 · 0 评论 -
微信小程序wx.request接口请求封装,入门级附源码
接口统一配置文件,http.jsconst fetch=require("./fetch") // 引入封装的wx,request请求//确认开发环境// "http://192.168.2.121:81", // 开发环境// "http://192.168.2.121:81", // 测试环境// "http://192.168.2.121:81" // 生产环境let baseURL='http://192.168.2.121:81'; // 公共部分统一function shopL原创 2021-04-17 17:45:45 · 592 阅读 · 0 评论 -
微信小程序调用腾讯地图,点击选择并返回选择位置数据!
选择前选择位置选择后上代码:WXML<view class="cu-form-group border-bottom"> <view class="title">详细地址</view> <input class="address-right" disabled='{{true}}' required="{{true}}" name="address" value="{{address}}" bindtap="Ad原创 2021-04-16 15:52:29 · 1259 阅读 · 0 评论 -
小程序上传文件到服务器并回显可删除,包含图片视频文档等格式,附源码!
我这里应用了vant-weapp插件,其实原理都是一样的,主要是调用微信的wx.uploadFile方法来实现;上传前; 上 传后//图片上传;html<van-uploader max-count="1" type="image" file-list="{{ fileList1 }}" use-before-read bind:be原创 2021-04-15 11:03:58 · 627 阅读 · 1 评论 -
Hbuilder开发H5运行到微信开发者工具,访问链接不显示
在这里看清楚我的标题哈,如果你是小程序运行到开发者工具就不用看了,我这个是公众号H5,我是用Hbuilder开发的H5页面,需要依赖微信开发者工具调试登录授权和微信支付功能,我们直接在Hbuilder打开项目点运行到浏览器,然后运行成功后,直接复制生成的访问链接,然后打开微信开发者工具,点新建项目,然后把链接复制过来就可以了,如下图...原创 2021-03-30 14:39:52 · 1288 阅读 · 1 评论 -
微信小程序动态绑定style样式
微信小程序动态绑定style样式,homeOutObj.color是你js文件里面设置的颜色,可以根据用户操作改变值,达到动态渲染效果,如果样式比较复杂的话建议绑定动态class传送门:绑定动态class原创 2021-03-23 09:25:21 · 32012 阅读 · 8 评论 -
微信小程序动态绑定class样式类
话不多说,直接上代码,循环列表,根据选中状态显示不同的样式,active就是你在wxss文件里面创建的类名<view class="{{item.select ? 'active':''}}" wx:for="{{itemList}}" wx:key="{{item.id}}"> {{item.name}}</view>......原创 2021-03-23 09:18:43 · 6600 阅读 · 2 评论 -
调用微信的收货地址和我的地址功能页面。
在微信小程序里面调用这个功能页面其实很简单,直接在jS里面调用wx.chooseAddress({});详细说明请看官方文档说明:官方文档说明实现效果图;原创 2020-12-28 18:14:05 · 606 阅读 · 2 评论 -
不对外开放的微信小程序审核时不通过,因为无法提供测试账号导致审核人员登录失败解决办法!
其实这样仅供公司内部员工使用的小程序很常见的,我现在开发的也是,外部人员无法使用,只有公司内部员工经过授权的微信才可以注册登录,这时我们提交正式版本时,因为怕公司资源泄露,是无法提供测试账号给微信审核人员的,导致他们登录时显示登录失败,而导致审核不通过,解决办法其实很简单,使用手机录屏,或者用其他设备录像,用我们自己的账号登录一下,然后进入小程序随便点几个功能,不涉及公司机密的那种就可以了,证明小程序是可以正常登录和使用的,在提交的时候吧这段视频加上,如下图,这样提交就可以正常审核通过了!...原创 2020-12-22 10:13:47 · 3018 阅读 · 7 评论 -
怎么调用微信自带的收货地址和我的地址功能页面。
在微信小程序里面调用这个功能页面其实很简单,直接在jS里面调用wx.chooseAddress({});详细说明请看官方文档说明:微信收货地址文档API原创 2020-10-28 14:35:54 · 926 阅读 · 0 评论 -
微信小程序回到顶部,点击滚动到顶部简单易懂!
wx.pageScrollTo({ scrollTop: 0})原创 2020-10-28 10:48:47 · 911 阅读 · 0 评论 -
解决微信小商店购物组件,点击详情左下角店铺后无法返回的问题!
是购物组件哦,不是独立小程序哦,解决办法很简单,把组件的版本调到1.0.58或者以下就可以了,最高是1.0.58,代码如下,在app.json文件里面配置:"plugins": { "mini-shop-plugin": { "version": "1.0.58", //版本号降低即可,不可高于1.0.58 "provider": "wx*********90" } },...原创 2020-10-22 16:14:46 · 782 阅读 · 0 评论 -
微信小商店购物组件接入现有的小程序,在开发者工具中使用
最近项目需要写一个订单商城模块,后来发现微信竟然有这个组件,就拿过来用用试试看,为了赶项目进度,降低开发资源还是挺不错的,我们直接按照开发文档给出的流程去做:1.第一步先在小程序后台管理页面开通这个服务:不懂得看这里➡购物组件开通2.开通以后需要审核,看到如上图就说明开通成功了,接下来就是第二步,这里比较坑,我在微信开发文档没看到这一步和相关的说明,就是为我们需要引入这个组件才可以使用,看下图,先打开设置,第三方设置,然后添加插件,第一个就是,添加完了就可以了3.第三步,添加完插件后,点击后面详情原创 2020-10-19 16:07:44 · 6642 阅读 · 9 评论 -
小程序怎么发布,一套小程序代码怎么同时发布到不同的小程序上面,发布为体验版和正式版本!
每一个小程序都有一个唯一标识,稍微有点经验的都知道,小程序是有一个管理后台的登录小程序后台管理,登录后就可以看到你拥有管理权限的小程序了,一般公司的小程序都会把你设置为开发人员,你是可以在小程序开发者工具里面直接上传的,见下图:在上传之前,我们先点击上传旁边的详情按钮,打开配置页面,修改项目addip,吧这个appid修改成需要覆盖的线上小程序id即可,项目的appid在微信管理后台可以看到,如果没有权限查看,直接找上头要,产品经理应该知道,填写好,直接上传就ok了,想要发布为到别的小程序上面去也很简单,原创 2020-10-16 14:27:03 · 2945 阅读 · 1 评论 -
微信小程序夜间模式,实现更换皮肤,切换白天黑夜模式,简单易懂
先看下效果图吧:夜晚模式样式:白天正常样式:先讲一下具体的思路和实现方法吧,我这个功能是项目已经上线一年后才提出要加上去的,由于页面比较多,重构wxSS太费力了,就选了简单粗暴的方式,直接另外给一套夜间模式的单独样式,吧白天的样式给覆盖掉,用户在点击模式切换的时候,直接设置一个全局变量‘idDark’存入到缓存中,然后在去到每一个页面的时候,在onShow方法里面读取一下当前的’isDark’值,判断当前是否为夜间模式,如果是就显示夜间模式样式,如果不是就正常显示就ok,这里皮肤设置其实修改的全是原创 2020-10-13 16:01:27 · 6823 阅读 · 8 评论 -
小程序左右滑动页面切换tab切换页面显示!
<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">内容...</view>首先给你可滑动部分加上一个容器,然后绑定三个事件,touchStart监听开始滑动事件,touchMove监听结束滑动事件,touchEnd监听滑动结束事件。//触屏开始点坐标let startDot = { X: 0, Y: 0};//触屏到点坐标let touchDot原创 2020-10-09 16:29:31 · 1126 阅读 · 0 评论 -
微信小程序video调用play方法无效,正解!
直接上代码,赶快解决问题去吧:<video id="myvideo2" src='https://peacebird-img.oss-cn-shanghai.aliyuncs.com/wx/2019-12-11-bar-12.mp4' controls></video><view class="box"> <text wx:if="{{!item.play}}" bindtap="videoPlay">△</text><原创 2020-09-23 11:58:30 · 4803 阅读 · 2 评论 -
微信小程序父组件调用子组件里面的函数方法及传参。
第一步:给我们子组件加上id标识<my-page id="page"></my-page>第二步:直接通过this.selectComponent("#page")调用方法this.selectComponent("#page").getData('我是参数');第三步:子组件里面声明这个方法getData(data){ console.log('我是子组件方法',data) //打印结果(我是子组件方法,我是参数)}你会了吗,会了就点个赞吧亲!...原创 2020-09-23 11:19:55 · 3100 阅读 · 10 评论 -
小程序 antv绘制曲线图折线图,把圆点置于曲线后方,点曲线样式自定义!
最近用antv在小程序绘制图表,出现一个问题,看下图,曲线显示在了小圆点上方,很不美观,需要效果入下下图,小圆点置于最上层,不要被挡住,好了问题说明白了,就来看代码:图一代码如下: chart.point().position('showData*value').style('showControl', { stroke: 'rgb(222,174,255)', fill: '#fff', lineWidth: 1, }).co原创 2020-09-12 10:31:43 · 2365 阅读 · 0 评论