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

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

微信小程序默认的导航比较单一，不利于维护，我们可以自定义导航，通过组件的形式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

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

25天前

137 0

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

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

25天前

145 0

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

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

2021-11-01

172 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

94 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

112 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

144 0

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

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

2021-10-26

112 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

131 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

144 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

160 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

270 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

229 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

333 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

265 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

294 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

429 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)

微信小程序如何使用微信支付、小程序微信支付案例

2021-08-22

231 0

前提条件：1、企业微信小程序、并接入微信支付2、登录小程序关联商户号3、开通微信支付商户开通地址：https://pay.weixin.qq.com/实现步骤：一、小程序关联微信支付商户号1、;登录小程序后台，点击功能->微信支付->关联更多商户号2、点击之后，会跳转到微信支付商户平台，https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage没登录微信支付商户平台的可以先登录，接着点击产品中心-》点击左侧的AppID账号管理-》点击右侧的关联AppID按钮3、会跳到新增授权页面，我们输入我们小程序的appid，

微信小程序实现授权登录功能，并获取用户账号信息

2021-08-01

342 0

2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区）,采用getUserProfile接口获取，以下是个案例，供大家参考。1、wxml前端按钮部分<view><button class="btn_submit" catchtap="getUser">登录</button></view> 2、js部分代码：;//获取用户信息 ; ; ; async getUser(e) { ; ; ; ; ; var _that = this ; ; ; ; ; ;wx.getUserProfile({ ; ; ; ; ; ; ;desc:'正在获取',//不写不弹提示框 ; ; ; ; ; ; ;success:asyn

微信小程序封装请求接口数据

2021-07-10

315 0

小程序如果出现多个页面请求数据接口，这时我们就得考虑封装接口来请求数据，这样让我们代码更加可用性，也方便维护。1、在根目录下创建request目录，然后新建一个文件夹index.js文件，添加如下代码：export;const;request=(params)=>{ ;;return;new;Promise((resolve,reject)=>{ ;;;;wx.request({ ;;;;;;...params, ;;;;;success:(result)=>{ ;;;;;;resolve(result); ;;;;;}, ;;;;;fail:(err)=>{ ;;;;;;;reject(err); ;;;;;} ;;;;}) ;;}); }2、使用封装的请求//;index.js //;引入发送请求方法 import;{;reques

微信小程序自定义颜色变量，以及如何使用wxss变量

2021-07-08

416 0

导语：开发小程序过程中，我们如果经常会用到同个颜色或者字体大小，为了方便维护和修改，我们可以使用变量来调用，后期修改和维护也方便。1、首先在全局样式文件app.wxss下创建我们的颜色变量page{ ;;/*;定义主体颜色;*/ ;;--themeColor:#f65551; ;;/*;定义统一的字体大小;*/ ;;font-size:28rpx; }2、使用样式变量view{ ;;color:;var(--themeColor); }这里我们在index页面的index.wxss中使用var(--themeColor)来使用我们的上面定义的变量