微信小程序,微信小程序开发教程

微信小程序引入echarts统计图，并动态数据渲染

2022-09-04

一、下载插件：https://github.com/ecomfe/echarts-for-weixin将下载的ec-canvas文件放置到小程序项目根目录二、引入插件：打开.json文件{ ;;"usingComponents":;{ ;;;;"ec-canvas":;"../../ec-canvas/ec-canvas" ;;}, ;;"navigationBarTitleText":;"小程序数据报表" } 三、设置echarts样式：打开/wxss文件，加入如下代码：/**index.wxss**/ .container;{ ;;position:;absolute; ;;top:;0; ;;bottom:;0; ;;left:;0; ;;right:;0; ;;display:;flex; ;;flex-direction:;column; ;;align-items:;center; ;;justify-content:;space-between; ;

解决PHP获取微信小程序用户头像模糊问题

2022-08-25

284 0

PHP获取微信小程序用户头像默认是132尺寸，看起来比较模糊，是因为头像是132的尺寸。我们只需要在存进数据库的时候，使用substr_replace()函数进行查找替换即可substr_replace($input['avatarUrl'],'0',-3) 可以看到是把最后三位132替换为0，这样得到的微信用户头像就是高清的头像了。

微信小程序定位授权方法判断，要求必须授权。

2022-08-09

903 0

微信小程序定位授权方法判断：未授权弹出授权对话框，确定授权，通过wx.openSetting发起授权请求，再次授权，调用wx.getLocation的API，用户首次进入页面,调用wx.getLocation的API//定位方法 getUserLocation: function () { ;;;var _this = this; ;;;wx.getSetting({ ;;;;success: (res) => { ;;;;;// res.authSetting['scope.userLocation'] == undefined;;表示初始化进入该页面 ;;;;;// res.authSetting['scope.userLocation'] == false;;表示非初始化进入该页面,且未授权 ;;;;;// res.authSetting['scope.userLocation'] == true

微信小程序地理位置接口wx.getLocation获取当前地理位置，速度一直审核不通过的解决方法

2022-08-09

2961 0

写这篇文字的同时，博主已经被小程序接口审核拒了14次了，几乎每次都是：1、你好，你的小程序“xxxxxx”申请的wx.getLocation接口因你提供的申请原因/辅助图片/网页/视频内容无法确认申请接口使用场景审核不通过，建议修改后重新提交。2、你好，你的小程序“xxxxx”申请的wx.getLocation接口因你所描述的小程序接口使用场景，目前未符合接入wx.getLocation（获取当前的地理位置、速度）接口的开放范围审核不通过，建议修改后重新提交。最终找到西部数码一篇文章：（小程序地理位置接口申请），根据修改才成功通过审批。申请用途：实时定位用

微信小程序使用wx.canvasToTempFilePath将canvas生成图片

2022-07-21

828 0

我们有时把当前画布指定区域的内容导出生成指定大小的图片，我们可以使用wx.canvasToTempFilePath(Object object, Object this)方法假设有一个canvas<canvas id="myCanvas"></canvas> 我们可以是用以下方法生成图片wx.canvasToTempFilePath({ ;x: 100, ;y: 200, ;width: 50, ;height: 50, ;destWidth: 100, ;destHeight: 100, ;canvasId: 'myCanvas', ;success(res) { ;;console.log(res.tempFilePath) ;} }) 这样会将 canvas 生成一张临时图片

微信小程序自定义相机功能，设置相机背景图框

2022-07-08

1456 0

我们在日常使用一些应用或者小程序，经常可以看到，比如人脸识别，会有个相机头像框，这不仅可以是用户拍照更加清晰标准，这是怎么实现的呢？实际上，这个是定位在上面的。具体实现方法入下：1、小程序前端wxml代码：<view class="ddbn"> ; <view class='camera'> ; ; <image mode="widthFix" src="{{src}}" class="bigImg"></image> ; ; <image src="https://www.tpxhm.com/ai/icon/camerabg.png" mode="widthFix" class="camerabg1"></image> ; ; <image src="https://www.tpxhm.com/ai/icon/ca

微信小程序滑动滚动导航，滑动指定位置滚动导航

2022-07-08

1164 0

微信小程序滑动导航，滚动导航选中案例，供大家参考和使用，实现点击头部导航跳转到指定位置，点击底部导航，滑动至指定位置选中及滚动位置。效果展示：1、wxml代码： <view;class="topView"> ;;<scroll-view;class="tabs";scroll-x="true";scroll-with-animation='true';scroll-into-view="x{{xId}}"> ;;;;<view;class="tab;{{xId==item.id?'greenColor':''}}";wx:for="{{list}}";wx:key="item";data-id="{{item.id}}" ;;;;;;catchtap="changeTab";id="x{{item.id}}"> ;;;;;;<view;class="tab

如何在微信小程序中引入企业微信客服

2022-06-07

2445 0

随着企业微信的普及，很多人习惯用企业微信去加客服，同时也会考虑在微信小程序中引入企业微信客服，本文教教大家如何引入企业微信客服。前提：小程序和企微都认证好了。一、小程序后台配置：1.1、进入小程序后台，功能-客服-微信客服，复制企微ID接入我们的企微客服二、企微2.1、登录企业微信管理后台，进入「应用管理-应用-微信客服」，选择接入场景为「在微信内其他场景接入」。2.2、选择需要在小程序中接待用户咨询的客服帐号，找到对应的客服链接，复制。三、小程序代码编写3.1、编写跳转按钮<view @click="getQwUrl(’企微客服链

微信小程序接入视频号直播教程实例

2022-03-24

4505 0

一、前景：2021年7月份，微信小程序上线了跳转视频号直播的功能，我们也在第一时间发布了直播悬浮窗组件，使商家能够更便捷的将用户导流至视频号直播，促进成交。在近期，微信又上线了小程序预约直播功能，更加丰富了小程序与视频号之间的互动，我们也在微页面中新增了相关组件，帮助商家接入该功能。效果展示：1、视频号直播悬浮窗2、视频号直播组件3、直播已开始，则会展示直播中的状态，点击跳转直播间我们要实现的也就是这样的一个功能，在商家小程序中加入视频号直播跳转，实现小程序的免费直播功能。二、具体步骤：1、小程序.js文件

微信小程序实现滑动指定位置置顶、吸顶导航

2022-02-13

1519 0

微信小程序滑动指定位置主要用到onPageScroll方法，这里我们实现滑动至208px高度的时候悬浮导航。思路就是滑动值该位置，给该悬浮导航加上指定class名fixed，详细代码如下：1、详细js代码Page({ ;data: { ;;scrollTop: '', //滑动置顶 ;}, ;onPageScroll: function (t) { ;;var a = this; ;;// console.log(t.scrollTop) ;;a.setData({ ;;scrollTop:t.scrollTop ;;}) ;} }) 2、wxml代码： <view class="{{scrollTop>208 ? 'fixedTab fixed' : 'fixedTab'}}"> ;<view class="{{cate ==1 ? 'fixedTabIt

微信小程序结合腾讯地图获取用户所在地址

2021-12-09

1370 0

一、前提：1、申请腾讯地图api接口：https://lbs.qq.com/注册账号并创建应用，会得到一个KEY2、下载微信小程序JavaScriptSDK：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview3、安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com二、代码编写：小程序端结合wx.getLocation({})接口1、引入sdk：// 引入SDK核心类，js文件根据自己业务，位置可自行放置 var QQMapWX = require('@/utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.

微信小程序如何自定义底部导航，自定义导航案例

2021-11-24

1073 0

微信小程序默认的导航比较单一，不利于维护，我们可以自定义导航，通过组件的形式1、;在根目录创建components文件夹，用于放置我们的导航的组件2、;创建tabBar组件，右击组件文件夹新建Component3、;编写组件代码tabBar.wxml<view class="todbar {{isFullSucreen?'fix-Full-button':''}}"> ;<view class="todbarItem" bindtap="tabClick" data-path='{{item.pagePath}}' wx:for="{{tabbarList}}" wx:key="{{item}}" style="width: {{750 / tabbarList.length}}rpx;"> ;;;<view class="todbarItemImage"> ;;;;;<image

微信小程序获取生成二维码的页面参数

2021-11-07

702 0

使用微信小程序二维码接口生成页面商品二维码或海报，参数可以使用以下方法获取decodeURIComponent(options.scene) 这样就能获取到二维码中scene参数

微信小程序生成URL短地址urllink.generate页面参数获取

2021-11-07

1007 0

我们urllink.generate生成小程序带参数页面的url链接，打开之后如果用普通的获取方式是获取不到参数的，我们需要再onload中使用以下方式获取onLoad:;function;(options);{ ;;;;console.log(decodeURIComponent(options.id)) ;;;}

微信小程序生成URL短地址urllink.generate

2021-11-01

2070 0

获取小程序 URL Link，适用于短信、邮件、网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序链接，有数量限制，目前仅针对国内非个人主体的小程序开放1、;获取接口凭证ACCESS_TOKEN2、请求地址POST https://api.weixin.qq.com/wxa/generate_urllink?access_token=ACCESS_TOKEN3、请求参数access_token;;接口调用凭证path 通过 URL Link 进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带 query 。path 为空时会跳转小程序主页query 通过 URL Link 进入小程序时的query，最大1024

微信小程序后端生成页面二维码

2021-10-28

1551 0

微信小程序后端生成页面二维码，比如后台点击商品列表中其中一个商品，就可以生成页面二维码。1、生成AccessToken<?php $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.Env('APPID').'&secret='.Env('APPSECRET'); $result =$this->curlRequest($url); $result =json_decode($result,true); ?> 2、生成二维码<?php $codeurl = 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token='.$result['access_token']; ;;;;;;$param = [ ;;;;;;;;'path'=>'pages/goods

微信小程序生成二维码报错"errcode":40159,"errmsg":"invalid length for path, or the data is not json string rid: 617a1e61-38ad5e05-3246678b

2021-10-28

2009 0

小程序生成二维码会报错"{"errcode":40159,"errmsg":"invalid length for path, or the data is not json string rid: 617a1e61-38ad5e05-3246678b"}"原因是post提交的data不是json字符串，我们只是转为json即可;//获取二维码 ;$codeurl = 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token='.$result['access_token']; ;$param = [ ;;;;;;;;'path'=>'pages/goods/detail?id='.$id, ;;;;;;;;'width'=>500 ]; ;$codeRes = $this->curlRequest($codeurl,json_encode($param)); dd($codeRes);

解决微信开发者工具调试器无Storage选项卡，无法查看缓存问题

2021-10-26

1329 0

微信开发者工具版本也是最新的，然后调试器下没有缓存查看选项，如下图解决方法如下：菜单-微信开发者工具-调试-打开调试目录-插件目录删掉里边的文件，然后重启试下。可以看到已经恢复了

Laravel8+微信小程序接入微信支付案例

2021-10-26

1254 0

一、服务端逻辑：服务端使用jsApi支付生成预支付订单，返回给前端，使用的微信支付v2版本1.1、下载官方sdk，也可用这个，经过博主修改的laravel版的：https://www.aliyundrive.com/s/mf1jnwagKuk1.2 、将下载好的微信支付sdk放置到vendor目录下。1.3 、在订单控制器OrderController引入我们的微信支付sdkrequire_once "../vendor/wxpaysdk/lib/WxPay.Api.php"; require_once "../vendor/wxpaysdk/lib/WxPay.NativePay.php"; require_once "../vendor/wxpaysdk/lib/phpqrcode/phpqrcode.php"; require_once "../vendor/wxpaysdk/lib/WxPay.

微信小程序封装公共方法及如何调用

2021-10-19

1263 0

1、比如有下面这段代码，首先在utils.js中添加如下代码function isUserLogin(){ ;//判断是否登录 ;if(wx.getStorageSync('rj_userInfo')!==''){ ;;console.log(123) ;;// this.setData({ ;;//;;userInfo: wx.getStorageSync('rj_userInfo') ;;// }) ;}else{ ;;wx.navigateTo({ ;;;;url: '/pages/login/login' ;;}); ;} } module.exports = { ;isUserLogin: isUserLogin } 2、调用方法引入utils.jsconst until =;require('../../utils/util.js'); ;/** ;;* 生命周期函数--监听页面显示 ;;*/ ;onShow: function () { ;;until.isUserLogin()

微信小程序自定义底部导航全面屏自适应

2021-10-10

995 0

如果我们自定义底部导航，会发现底部导航会被挡住一部分，我们可以使用下面的方法来解决这个问题。全局app.js加入判断设备是否全面屏方法：;;/** ;;;;;*;判断设备是否为全面屏 ;;;;;*/ ;;;;checkFullSucreen:;function;();{ ;;;;;;const;self;=;this ;;;;wx.getSystemInfo({ ;;;;;;success:;function;(res);{ ;;;;;;;;console.log(res) ;;;;;;;;//;根据;屏幕高度;进行判断 ;;;;;;;;if;(res.screenHeight;-;res.windowHeight;-;res.statusBarHeight;-;32;>;72);{ ;;;;;;;;;;self.globalData.isFullSucreen;=;true ;;;;;;;;} ;;;;;;} ;;;