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

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

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

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

2022-03-24

2109 0

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

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

2022-02-13

704 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

726 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

618 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

428 0

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

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

2021-11-07

595 0

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

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

2021-11-01

1217 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

805 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

909 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

729 0

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

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

2021-10-26

654 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

643 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

468 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 ;;;;;;;;} ;;;;;;} ;;;

微信小程序navigator跳转的使用、点击效果颜色修改

2021-09-16

799 0

微信小程序跳转除了绑定点击方法之外，还可以才使用navigator包裹起来做跳转，如下：;<navigator;url="/pages/goods/detail" hover-class="none" > ;;<view class="shop_item"> ;;;<view class="shop_thumb"> ;;;;<image src="/asset/images/pro_05.jpg" mode="widthFix"></image> ;;;</view> ;;;<view class="shop_title">商品1</view> ;;;<view class="shop_price"> ;;;;<view class="shop_price_now"><text>￥</text>399.00</view> ;;;;<view class

微信小程序实现同步上传图片方法

2021-09-09

1000 0

微信小程序图片上传默认是异步的形式，主要用到wx.uploadFile(Object object)，将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求。也就是下面的示例代码wx.chooseImage({ ;success (res) { ;;const tempFilePaths = res.tempFilePaths ;;wx.uploadFile({ ;;;url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址 ;;;filePath: tempFilePaths[0], ;;;name: 'file', ;;;formData: { ;;;;'user': 'test' ;;;}, ;;;success (res){ ;;;;const data = res.data ;;;;//do something ;;;} ;;}) ;} }) 但是我有时需

微信小程序实现多图上传图片预览和删除案例

2021-09-08

590 0

本文例子实现小程序多图上传和预览功能，限制图片上传张数限制，供大家参考。效果展示：1、wxml代码：<form catchsubmit="formSubmit" catchreset="formReset"> <view class="other"> ;<view class='uploader-img;flex justify-content-start' wx:if="{{pics}}"> ;<view class='uploader-list' wx:for="{{pics}}" wx:key="item.length"> <image src='{{item}}' data-index="{{index}}" mode="scaleToFill" bindtap='previewImg1'/> <image class='delete' data-index="{{index}}" src='/asset/del.

小程序版本更新之后，如何进行热更新

2021-09-07

1218 0

小程序版本更新后，有的机型用户看到的还是旧版，和服务端不同步。这时我们可以用小程序的热更新，使用户看到的是最新的版本我们打开app.js，在onLaunch() {}方法下加入全局的热更新。;;console.log('热更新') ;;if (wx.canIUse("getUpdateManager")) { ;;;const updateManager = wx.getUpdateManager(); ;;;updateManager.onCheckForUpdate(function(res) { ;;;;console.log("onCheckForUpdate====11111", res); ;;;;// 请求完新版本信息的回调 ;;;;if (res.hasUpdate) { ;;;;;console.log("res.hasUpdate===="); ;;;;} ;;;}); ;;;update

Laravel+微信小程序实现获取用户手机号案例

2021-08-26

813 0

前提：企业认证的微信小程序说明：微信小程序获取用户手机号需要用户授权允许，然后传递code、iv、encryptedData，后端解密。Sdk下载：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#%E5%8A%A0%E5%AF%86%E6%95%B0%E6%8D%AE%E8%A7%A3%E5%AF%86%E7%AE%97%E6%B3%95已改好的laravel版阿里云网盘下载地址：https://www.aliyundrive.com/s/4rKkDc3cT68步骤实现：一、后端：1、Laravel后端：将下载好的sdk放在项目/app/Http/lib目录下wxBizDataCrypt，如下图所示：2、加载扩展类文件，打开项目根目录

微信小程序获取头像账号信息显示中文

2021-08-26

625 0

新版微信小程序获取用户信息，默认是英文的，我们可以给它加个参数lang:"zh_CN",，获取到就是中文的信息了;getUserProfile(e) { ;;// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 ;;wx.getUserProfile({ ;;;lang:"zh_CN", ;;;desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 ;;;success: (res) => { ;;;;console.log(res) ;;;;this.setData({ ;;;;;userInfo: res.userInfo, ;;;;;hasUser

微信小程序获取URL路径方法

2021-08-25

3814 0

我们有时在做页面分享功能需要获取url参数，可以使用下面步骤来获取步骤：获取加载页面、获取当前页面对象、获取当前页面URL、获取URL所带参数var pages = getCurrentPages();;//获取加载的页面 var currentPage = pages[pages.length-1];;//获取当前页面的对象 var url = currentPage.route;;//当前页面url var options = currentPage.options;;//如果要获取url中所带的参数可以查看options console.log(url+options.id)