- UNI-APP 开发微信公众号(H5)JSSDK的使用、微信扫一扫
自己做了一个h5端调起微信扫一扫的功能,上网一找,没有说得很详细的,依样画葫芦,结果出了很多问题。下面给大家讲一下做的方法,用这个方法亲测有效。 在做之前了解一下 JSSDK使用步骤,这个在 https://developers.weixin.qq.com/doc/ [图片] 如果看完这个,对UNIAPP(H5)JSSDK的使用还是不明白,可以看看下面这种方法 [图片] 这个随便一搜就有。下面开始实现 第一步引入jweixin-module文件,按照自己喜欢的方式途径下载好jweixin-module文件 本人是直接 npm install jweixin-module --save [图片] [图片] 我们只需要引入文件夹里面的jweixin-module就行 在main.js加载jweixin-module文件 import wx from '@/node_modules/jweixin-module/lib/index' 这里的路径看你文件放在哪,我没有单独把jweixin-module文件提出来,你也可以提出来后放在components里面 接着就是页面中使用了 下面分段说明 [图片] 这里我在页面加载完毕的时候就请求接口了,你也自己封装一个方法,直接引入就行。 通过config接口注入权限设置(拿到签名数据后就是注入权限了) [图片] 最后在需要的地方使用就行啦 [图片] 最后附上我的代码,里面请求接口改成你自己的 <template> <view> <button class="bg-blue" @click="scancode()">扫码</button> </view> </template> <script> export default { data() { return {} }, onLoad() { // #ifdef H5 let redirect_uri = location.href.split('#')[0] this.$http.get('你的接口', { sing_url: redirect_uri }).then(res => { this.wx_co(res.data) }).catch(e => { console.log('错误信息', e); }); // #endif }, methods: { wx_co: function(wx_co) { this.$wx.config({ debug: false, // 开启调试模式 appId: wx_co.appId, // 必填,公众号的唯一标识 timestamp: wx_co.timestamp, // 必填,生成签名的时间戳 nonceStr: wx_co.nonceStr, // 必填,生成签名的随机串 signature: wx_co.signature, // 必填,签名,见附录1 jsApiList: ['onMenuShareAppMessage', 'scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }); this.$wx.ready(function() { //需在用户可能点击分享按钮前就先调用 this.$wx.checkJsApi({ jsApiList: ['scanQRCode'], // 需要检测的JS接口列表,所有JS接口列表见附录2, success: function(res) { // 以键值对的形式返回,可用的api值true,不可用为false // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); }); this.$wx.error(function(res) { console.log(res, 'this.$wx.error') // config信息验证失败会执行error函数 }); }, scancode: function() { this.$wx.scanQRCode({ needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function(res) { var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果 } }); } } } </script> <style lang="scss"> </style> 好了,到这里UNI-APP 开发微信公众号(H5)调用微信扫一扫就实现了,是不是很简单, 最后附上效果 [图片] [图片] 讲得不是很好,但是用这个方法一定可以调起微信扫一扫! 想要代码可以找我拿
2020-05-15 - 如何自己解绑小程序项目成员(体验者、运营者、开发者)
打开手机搜索公众号“公众平台安全助手”; [图片][图片] 关注公众号“公众平台安全助手”选择左下角菜单“绑定查询”; [图片] 选择子菜单“微信号绑定账号”; [图片] 选择“小程序”tab,下滑找到作为项目成员的小程序; [图片] 点击希望解绑的小程序,点击解绑。这样操作完你就可以再去绑定你需要的小程序啦! [图片] 补充:小程序相关数量限制: 成员管理人数限制 每个小程序帐号可添加一定数量的项目成员、体验成员,具体限制如下: [图片] 管理员及其他项目成员绑定帐号数不占用公众号绑定数量限制。 每个微信号可以成为50个小程序的项目成员。 每个微信号可以成为50个小程序的体验成员。 1.小程序成员管理官方教程 2.如何查询身份证个人微信号手机号绑定的帐号?
2020-11-05 - 小程序之间跳转是如何实现无需弹框确认的?
小程序之间跳转是如何实现无需弹框确认的? 两个小程序是一个主体下的
2023-11-13 - 微信小程序开发初学者之入门步骤和体验
一、小程序是什么。 首先,你要对小程序的开发有一个整体的概念。 对于小程序到底是什么的这个问题,百度百科已经给出了一个比较亲民且容易理解的答案。 Q:小程序是什么?它有着什么样的功能? A:小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。由于小程序不存在入口。 Q:小程序可以和现有的App 打通吗? A:小程序可以借助微信联合登录,和开发者已有的App 后台的用户数据进行打通,但不会支持小程序和App 直接的跳转。 Q:微信已经有了订阅号、服务号、企业号,小程序和这三者有什么不同? A:小程序、订阅号、服务号、企业号是并行的体系。 Q:外界有说法称,小程序的推出意味着微信要做一个应用分发市场,是这样吗? A:微信推出小程序,并非想要做应用分发市场,而是给一些优质服务提供一个开放的平台。 但从小程序的开发结构上来说,微信小程序应该属于前端开发,其结构中的wxml、js、wxss同web开发的结构有类似的地方。 [图片] 二、开发工具和开发环境 这一部分网上有很多帖子可以查找,官方也给出了工具下载和开发api的地址。 微信公众平台给出了小程序的设计、介绍、使用、注册、工具、数据绑定等几乎全部功能的说明,初学者可以先去浏览一遍,心里对小程序有个粗略的认识,将工具下载安装,账号注册,做好一切准备之后,再来进行入门的开发学习。 微信公众平台关于小程序的入口地址:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2018211 三、新建项目,认识架构 [图片] 打开工具的时候,会进入这个新建项目的页面。 可以看到,要添加一个新的小程序项目需要填写三部分内容:AppID,项目名称,项目目录。为了能快速开发,我们先选择 无AppID 这个选项,如果正式开发,是需要添加AppId的,关于Appid的部分可以去查询资料。 项目目录,是指你的小程序的代码将放在哪个目录下,你可以自己在本地创建一个文件夹,也可以在github创建一个新项目,都可以。 配置小程序 这一节,我们将介绍小程序的配置。首先,让我们来看看项目自动生成的app.json文件长什么样子。 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } 其实这里,共有五个部分可以配置,分别是pages, window, tarBar, networkTimeout和debug pages:定义的是这个小程序由哪些页面组成。 在以后需要新增或者减少页面时,都需要在这里进行设置,有几个页面pages数组就有几项。 可以看到pages是一个数组,而数组的第一项就是微信小程序的初始页面,你可以试着把logs页面移动到最前面看看效果,这在开发的时候是一个不错的小技巧。 还有一个技巧要分享给你的是,在我们需要添加一个新页面的时候,没必要傻傻的手动去创建文件夹,然后新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss这四个文件。我们只要在 pages数组中 添加一个你想创建的页面,然后 Ctrl + s 保存即可!是不是很酷? { "pages":[ "pages/logs/logs", "pages/index/index" ], ... } window: 定义的是窗口的配置信息。 属性类型默认值描述 navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如"#000000" navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black/white navigationBarTitleTextStringa导航栏标题文字内容 backgroundColorHexColor#ffffff窗口的背景色 backgroundTextStyleStringdark下拉背景字体、loading 图的样式,仅支持 dark/light enablePullDownRefreshBooleanfalse是否开启下拉刷新 tarBar: 用来定义 tabBar 的表现 tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。 我们可以在项目目录下添加一个images文件,用来存放我们的图片文件。 注意:目前小程序只支持网络图片或者base64图片,使用本地图片需要将图片转为base64代码 [图片] networkTimeout: 用来设置各种网络请求的超时时间。 如果你不是很清楚这个networkTimeout配置有什么作用,那么忽略就好。这对实际开发并没有什么影响。 属性类型必填说明 requestNumber否wx.request的超时时间,单位毫秒 connectSocketNumber否wx.connectSocket的超时时间,单位毫秒 uploadFileNumber否wx.uploadFile的超时时间,单位毫秒 downloadFileNumber否wx.downloadFile的超时时间,单位毫秒 [图片] 小程序的主体部分,可以从图中看出,主要有三个部分。 小程序下载:https://www.sucaihuo.com/source/213-0-0-0-0-0 1)app.js:小程序逻辑,初始化APP 2)app.json :小程序配置,比如导航、窗口、页面http请求跳转等。全局配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 3)app.wxss:公共样式配置 前面也说了,小程序主要有四个页面组成部分 1)js:页面逻辑 2)wxml:页面结构展示 3)wxss:页面样式表 4)json:页面配置,配置一些页面展示的数据 四、添加一个button 下面让我们来添加一个button吧 首先,我们要告诉小程序有哪些页面。 其次,需要设置小程序的导航栏标题,图如上面的app.json图中所示。 [图片] 1.首先,打开index.wxml页面,这个页面现在就是被首页tab调用的页面,先不管在哪调用的,我们现在页面中加三个button。小程序的页面架构跟web页面有些类似,wxml类似于html,从图中可以看到,将button放到view这个布局中,bindtab是点击事件的调用名,其点击效果会在对应的js页面中被触发。 2.对应上图,我们可以找到js中对应的事件触发及所调用的页面 [图片] 3.此时如果运行,点击按钮,有可能并不会触发页面跳转,而且还会报页面不存在的错误,这是由于触发的跳转页面的事件中所写的目标页面并没有在app.json中注册的原因,也就是这里。 [图片] 4.按钮或者页面的样式是什么样的,宽的扁的圆的,就卸载对应的wxss中就可以了。 [图片] 如上所示四步,就可以写出入门的简单的button、text、tab等,还可以触发事件,如果你的js很棒的话,那么就可以进行稍微复杂的页面和操作啦。
2018-12-18