小程序 - 美云 - Page 277FWQ.AI — Fast · Worldwide

小程序

栏目介绍多种方法实现功能小程序支持webview以后，我们开发的好多h5页面，就可以直接在小程序里使用了，比如我们开发的微信商城，文章详情页，商品详情页，就可以开发一套，多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。老规矩先看效果。因为这里涉及的东西比较多，录gif太多，没法上传，我就录制了一段视频出来。https://v.qq.com/x/page/t0913iprnay.html 原理先说下实现原理吧，实现原理就是我们在webview的h5页面里实现下单功能，然后点击支付按钮，我们点击支付按钮的时候会跳转到小程序页面，把订单号，订单总金额，传递到小程序里，然后小程序里使用订单号和订单金额去调起微信支付，实现付款，付款成功或者失败时都会有回调。我们再把对应的回调传递给webview，刷新webview里的订单和支付状态。一，定义webview显示h5页面关于webview的使用，我就不做讲解了，官方文档里写的很清楚，用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html webview很简单，就是用一个webview组件，显示我们的网页。二，定义h5页面我这里启动一个本地服务器，用来展示一个简单的h5页面。上图是我在浏览器里显示的效果。接下来我们在小程序的webview里显示这个页面，也很简单，只需要把我们的src定义为我们的本地网页链接就可以了。这里有一点需要注意因为我们是本地链接，我们需要到开发者工具里把这一项给勾选。三，来看下h5页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小程序内嵌webview</title> <style> .btn { font-size: 70px;…

2024-11-25 阅读全文 →

FWQ

小程序

小程序开发之APP（）函数

App() app()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。 object参数说明：前台、后台定义：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。关闭小程序(公共库版本1.1.0开始支持)：当用户从扫一扫、分享等入口(场景值为1007, 1008, 1011, 1025)进入小程序，且没有置顶小程序的情况下，小程序会被销毁。只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。示例代码： App({ onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. }, onHide: function() { // Do something when hide. }, onError: function(msg) { console.log(msg) }, globalData: 'I am global data'}) 登录后复制 onLaunch, onShow 参数场景值详见。…

2024-11-25 阅读全文 →

FWQ

小程序

实例讲解微信小程序倒计时功能

微信开发现在越来越火，倒计时功能是一个比较常见的功能，比如用户获取验证码就需要用到。倒计时功能在项目开发中经常会用到，今天小编给大家介绍下微信小程序倒计时功能实现代码，需要的朋友参考下吧，希望能帮助到大家。直接看看代码吧 //倒计时60秒 function countDown(that,count) { if (count == 0) { that.setData({ timeCountDownTop: '获取验证码', counting:false }) return; } that.setData({ counting:true, timeCountDownTop: count + '秒后重新获取', }) setTimeout(function(){ count--; countDown(that, count); }, 1000); } 登录后复制在需要倒计时的地方调用 Page({ data:{ counting:false }, //生成验证码 generateVerifyCode:function() {…

2024-11-25 阅读全文 →

FWQ

小程序

微信小程序中module.exports和exports的区别

微信小程序中.exports与exports的用法可以查看下面官方提供的文档，使用起来还是比较简单方便的，但时对于这两者的区别解释的不是很明白。微信小程序官方文档—-逻辑层–.png 为了更好的理解 exports 和module.exports 的关系，我们先来补点 js 基础。示例： // index.js Page({ onLoad: function(){ var a = {name: '张三'}; var b = a; console.log(a); console.log(b); b.name = '李四'; console.log(a);…

2024-11-25 阅读全文 →

FWQ

小程序

微信小程序实例：如何通过代码来获取头像的昵称

本篇文章给大家带来的内容是关于微信小程序实例：如何通过代码来获取头像的昵称，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 wx.getUserInfo(OBJECT)该方法经过官方改版后已不支持主动调用，要获取头像昵称等用户信息，需要用户主动授权。现在获取用户头像昵称等信息的方法如下： 1.通过button触发 <button></button> 登录后复制所需信息都在e.detail.value getUserInfo: function (e) { console.log(e.detail.value) }, 登录后复制 2.通过获取注意：该方法只能用来展示用户信息相关推荐：以上就是微信小程序实例：如何通过代码来获取头像的昵称的详细内容，更多请关注米云其它相关文章！

2024-11-25 阅读全文 →

FWQ

小程序

mpvue单文件页面配置的步骤介绍

本篇文章给大家带来的内容是关于mpvue 单文件页面配置的步骤介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 mpvue 的出现把 vue 的开发体验带到了小程序这个平台中，但其目录结构与传统的 vue 项目却并不完全一致，一个典型的页面包含以下三个文件： index.vue // 页面文件 main.js // 打包入口，完成 vue 的实例化 main.json // 小程序特有的页面配置，早期写在 main.js 文件中登录后复制其中，每个页面的 main.js 文件基本都是一致的，可通过 mpvue-entry 来自动生成（weex 也有类似的处理），而…

2024-11-25 阅读全文 →

FWQ

小程序

聊聊从H5页面跳转到小程序的几种实现方案（附常见坑点）

如何从h5页面跳转到小程序？下面本篇文章给大家介绍一下从h5页面跳转到小程序的几种实现方案，以及分享踩坑记录和注意要点，希望对大家有所帮助！最近负责的一个需求涉及到H5页面跳转小程序的场景，具体应用场景是：运营通过短信发送链接触达用户 => 用户点开链接 => 跳转至小程序指定的某个页面下面我们来看看H5跳转小程序目前有哪些实现方案~ 实现方案实现H5跳转小程序的方案目前有多种，可以根据自己的实际场景选择，上面提到的场景采用第二种更合适，我们先来一个个看。【相关学习推荐：】第一种：通过 URL Scheme 适合在外部浏览器运行的H5页面，通过 URL Scheme 的方式来拉起微信打开指定小程序。小程序的 URL Scheme 如果借助于云开发的话，是免鉴权，直接调用即可获取，这里不过多赘述，感兴趣的童鞋自己查文档吧~ 那如何获取小程序的 URL Scheme 呢？可以通过或在「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL…

2024-11-25 阅读全文 →

FWQ

小程序

小程序实例：小程序客服发送图片信息的实现代码

本篇文章给大家带来的内容是关于小程序实例：小程序客服发送图片信息的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 /** * 发送客服消息接口 */ public function actionCustomService() { $data = file_get_contents('php://input'); $data = json_decode($data,true); $qrcode_url = Yii::$app->params['gzh_qrcode']; $openId = $data['FromUserName']; $access_token = self::getAccessToken(); $url = 'https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token='.$access_token; $appid = Yii::$app->params['miniAppid']; $media_id = self::getRedis("wx_material:$appid", 'media_id'); if (!$media_id) { $material = self::uploadImg($qrcode_url,$access_token); if ($material) { $redis = Yii::$app->redis; $redis->hmset("wx_material:$appid", 'type', $material['type'], 'media_id', $material['media_id'], 'created_at', $material['created_at']); $redis->expire("wx_material:$appid", 7200); } $media_id = $material['media_id']; } $data1 = [ 'touser' => $openId, 'msgtype' => 'image', 'image' => [ 'media_id' => $media_id,…

2024-11-25 阅读全文 →

FWQ

小程序

微信小程序开发指南系列：关于页面跳转

从跳转的方式（或说成打开新页面的方式）来说大致可分为：请求转发，请求重定向和 tab页跳转(有过web经验的话，应该很清楚两种方式的区别)，部分出自官方文档。 wx.navigateTo(OBJECT) 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 wx.navigateTo(OBJECT) 注意点：小程序中要求页面的层级最多只能有五层，因为这种方式保留当前页面，也就是说以这种方式跳转页面，最多只能打开5个页面。关闭当前页面，跳转到应用内的某个页面。跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。注意点： 1.这里需要强调一下小程序中以堆栈形式记录页面。每一个以wx.navigateTo(OBJECT) 方式跳转的页面都会被压入堆栈，但是以wx.reectTo(OBJECT) 打开的页面则不会。借用一下官方的例子，很清晰明了。 // 此处是A页面 wx.navigateTo({ url: 'B?id=1' }) // 此处是B页面 wx.redirectTo({ url: 'C?id=1' }) // 在C页面内 navigateBack，将返回A页面 wx.navigateBack()…

2024-11-25 阅读全文 →

FWQ

小程序

小程序组件开发中的有关省市区三级联动的相关介绍

效果图：源码 index.wxml <import></import><template></template> 登录后复制 index.js var city = require("../../utils/city.js"); Page({ data: {}, onLoad: function() { console.log('onLoad...'); var that = this; city.init(that); } }); 登录后复制 address-temp.wxml <?xml version="1.0" encoding="utf-8"?><template> <view> <view> <picker> <view>{{province[provinceIndex]}}</view> </picker> </view> <view> <picker> …

2024-11-25 阅读全文 →