![](https://img-blog.csdnimg.cn/20200220214937884.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
该栏主要分析一些微信小程序的相关知识,欢迎大家来关注呀
柠檬不萌只是酸i
研究生在读 | 努力发论文 |
迈出第一步,才是新的开始。
展开
-
uni-app 完成横向滚动,scroll-view
使用uni-app的小伙伴们大家可能都用过这个组件 scroll-view , 但是我们拿网站上的demo到本地运行,但是是运行不出来的,因为缺少一些css文件。【先看下效果展示】:【完整代码】:<template> <view> <scroll-view class="scroll-view_H" scroll-x="true" :scroll-with-animation="true" @sc原创 2020-05-31 20:46:36 · 2867 阅读 · 0 评论 -
使用企业微信扫码登录流程、使用企业微信扫码登录获取code
官方文档:https://work.weixin.qq.com/api/doc/90000/90135/90988其实看文档就可以明白啦。两种方式:1、构造独立窗口登录二维码2、构造内嵌登录二维码我使用的是 第二种方式:构造内嵌登录二维码(1)引入js文件。( index.html 或者 .ejs入口文件 根据自己项目而定)<script src="...原创 2020-03-04 10:43:22 · 7166 阅读 · 0 评论 -
微信小程序的分享功能。分享给A,A点进来增加券的个数
<button class="invite_btn" hover-class="none" open-type="share">立即邀请</button>// 用户分享 onShareAppMessage: function (ress) { that = this; const { from, target } = ress; tha...原创 2020-02-15 11:12:06 · 475 阅读 · 0 评论 -
微信小程序请求返回的较大数据被截取了
问题描述:后端设置的字段类型是long,通过微信小程序请求得到的值被截取了。但是使用postman请求得到的数据是对的。解决办法:查文档后得知,js的数据类型只有16位精度,超过16位后面的都为0,可以让后端同事将long类型改成string类型。...原创 2020-02-15 10:23:21 · 962 阅读 · 0 评论 -
微信小程序 自定义组件实现类似Modal的弹框
效果展示:思路:在项目中,我们会遇到这样的情况,以上的的弹框都是类似的,我们不需要每个页面都写个弹框+背景。这样很是麻烦和繁琐。不如我们拆分成这样,弹框(组件)+弹框内容(slot)。组件代码:.wxml:<!-- 弹框组件,类似 Modal --><block wx:if="{{isShowInvite}}"> <cover-v...原创 2020-01-19 15:00:40 · 936 阅读 · 0 评论 -
微信小程序里面的自定义组件,自定义组件案例,组件间传参
微信小程序自定义组件自定义组件(1)在根目录下新建 components 文件夹,用来存放组件的。新建弹框组件:如下inviteRules.wxml文件:<block wx:if="{{isShowInvite}}"> <cover-view class="alert_bg" bindtap="_alertClose"></cover-vie...原创 2020-01-17 14:45:05 · 342 阅读 · 0 评论 -
微信小程序长按图片保存至相册
效果图:描述:「长按图片」,是否授权保存图片or视频到相册,「授权成功」,点击「保存到相册」即可完成。代码:wxml<image src="{{imgSrc}}" data-url="{{imgSrc}}" bindlongpress="saveImage"></image>jsPage({ data: { imgSrc: ...原创 2020-01-01 14:05:29 · 1355 阅读 · 0 评论 -
微信小程序中的 swiper 实现自定义左右按钮切换,且在swiper中禁止touch切换页面
效果图:[ qq 录制有点儿问题,凑合着看下效果图]点击左右按钮切换图片。在swiper中禁止touch切换页面: 在swiper-item 里面添加事件catchtouchmove<swiper-item catchtouchmove="stopTouchMove"> <image src="{{item}}" mode="widthFix" bind...原创 2019-12-31 16:59:13 · 2786 阅读 · 0 评论 -
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
效果图展示:实现方法:在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图、一个用来存放播放按钮,同级写一个cover-view用来完成封面上的文字,设置绝对定位,水平垂直居中,在播放按钮上添加点击事件,点击之后隐藏cover-view,最后在监听视频结束事件,重新填充封面跟播放按钮就可以了。代码:<...原创 2019-12-31 11:25:08 · 6446 阅读 · 2 评论 -
微信小程序 如何去掉滚动条的样式呢
效果图:去掉滚动条的样式:页面上加入以下代码即可。::-webkit-scrollbar{ width: 0; height: 0; color: transparent;}结果展示:原创 2019-12-17 22:16:25 · 803 阅读 · 2 评论 -
微信小程序获取自定义tabBar的高度。不同屏幕自定义tabBar的高度是不一样的。
效果图:【iphone5 】下tabBar的高度是 64【iPhone XR】下tabBar的高度是 82如何获取到不同手机上tabBar的高度呢。首先这个tabBar是自定义的。思路:我们只要获取到 tabBar 元素的高度值就可以。(1)在自定义组件或包含自定义组件的页面中,应使用this.createSelectorQuery()来代替,否则就使用 w...原创 2019-12-17 22:05:00 · 7151 阅读 · 3 评论 -
微信小程序实现自定义tabbar
效果图:描述:实现自定义的tab栏,点击 【教辅】、【我的】就切换tab,底部还会显示tabBar,但是点击中间的【福】,需要跳到新的页面。坑1:(1)在custom-tab-bar/index里面是无法wx.navigateTo跳转的,只能使用switchTab。那么我们的【福】要怎样跳转呢。在app.json里面的tabbar 里面的list里去掉关于【福】的相关pageP...原创 2019-12-17 16:03:34 · 737 阅读 · 0 评论 -
微信小程序 收起键盘 wx.hideKeyboard()
需求:当输入的手机号等于11位的时候,就收起键盘if (phone.length == 11){ wx.hideKeyboard()}原创 2019-12-04 17:03:49 · 5664 阅读 · 1 评论 -
微信公众号网页开发授权流程
公众号网页开发,首先需要授权。具体的可以查看微信公众号官方文档。授权方式有两种:(1)静默授权。scope:snsapi_base(2)非静默授权。scope:snsapi_userinfo下面是我在开发项目中使用的流程:【项目中使用的是非静默授权】首先:重定向是后端那边完成的,前端这边不需要做任何处理,只需要得到重定向过来链接里面的参数即可。这样做可以省去很多不必要的...原创 2019-11-28 23:21:17 · 583 阅读 · 0 评论 -
微信小程序支付wx.requestPayment
//拉起微信支付 toPayment(result){ wx.requestPayment({ timeStamp: result.timeStamp, nonceStr: result.nonceStr, package: result.wxPackage, signType:'MD5', paySign: resul...原创 2019-11-28 15:15:04 · 1825 阅读 · 2 评论 -
微信小程序的wxml页面里怎样调用函数来处理相关数据呢? wxs
需求:在后端返回的数据里面,有个 orderPrice 字段。orderPrice:1500 现在想在页面上显示的是15.00。返回的数据很多,只能在wx:for循环里面做处理。解决办法:这里我们需要使用wxs来完成。具体详见官方文档代码:test.wxml页面<!-- 用户处理页面数据,保留两位小数点 --> <wxs module="m1...原创 2019-11-27 16:32:10 · 1933 阅读 · 0 评论 -
微信小程序 转发到群聊里,获取shareTicket、获取群标识 openGId 【包含前、后端代码】
【官方文档】群转发【官方文档】获取转发详细信息效果图查看:前端代码如下:【share.js】:const app = getApp();var shareTicket,that, sessionKey, encryptedData;Page({ data: { }, onShow: function() { that = this; va...原创 2019-11-10 18:00:15 · 7449 阅读 · 3 评论 -
微信小程序 通过button实现转发分享功能。判断是不是好友点进来的还是自己点进来的
效果图展示:代码展示:share.wxml<button open-type="share">转发</button>share.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 用户点击右上角 和 button 实现分享 */ onShareAppMessag...原创 2019-11-09 19:46:11 · 1442 阅读 · 0 评论 -
微信公众号网页静默授权获取openId
微信公众号网页开发文档其实文档已经真的很详细了。下面是我简单捋的 静默授权的。<script type="text/javascript"> var that; var vm = new Vue({ el: '#app', data: { msg: "测试测试", appid: ...原创 2019-10-20 11:51:43 · 997 阅读 · 0 评论 -
微信小程序之 WebSocket练习
效果图展示:简单描述:页面刚一打开的时候,会从后端的服务器上,给用户主动发送消息。然后用户拿到服务器推送的数据和里面的新的session,下次给服务器发送消息的时候,会用到这个session。代码展示:var that, SocketTask,http_session,session, socketOpen = false;var app = getApp();...原创 2019-10-16 19:19:52 · 346 阅读 · 0 评论 -
微信小程序跳转h5页面
使用<web-view> 可以打开h5页面微信小程序<web-view>官网地址属性 类型 默认值 必填 说明 最低版本 src string 否 webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 1.6.4 bindmessage e...原创 2019-08-15 20:38:37 · 2603 阅读 · 0 评论 -
微信小程序中的模块化utils、配置公共的api地址、全局app.js文件
怎样理解模块化呢?模块化可以将一些公共的代码抽离成为一个单独的js文件,作为一个模块,模块里面的属性和方法默认是私有的。如果我们想在外部使用模块里面的属性和方法,在模块里面必须通过module.exports 暴露,暴露后,外部通过require引入就可以使用暴露的属性和方法。(一)模块化配置域名在utils下新建文件config.js:var config = { ho...原创 2019-06-16 03:02:05 · 2867 阅读 · 0 评论 -
怎样将后端返回的html代码解析成微信小程序的代码呢?
后端有时候返回的数据是如下的:<div>啦啦啦啦啦啦啦啦<h2>哦哦哦哦哦哦</h2></div>但是,微信小程序里面使用的是<view>标签的,不支持html标签,这就需要转换下,那么下面就介绍一个解析html的插件wxParse。解析html代码(将html代码解析成 微信小程序的标签)(1-1)找到github...原创 2019-06-16 02:33:37 · 1967 阅读 · 0 评论 -
微信小程序基础学习知识点
(一)在.wxml 里面:(1)使用<view></view> 来代替<div></div>(2)使用<text></text>来代替<span></span>(二)生命周期函数:(1)onReady 监听页面初次渲染完成(2)onShow 监听页面显示(3)onH...原创 2019-06-16 01:27:17 · 695 阅读 · 0 评论 -
微信小程序 里的抽奖转盘简单布局
先来看下效果图:这个圆盘被分为了5份,然后按照每个扇形划分:<view animation="{{animationData}}" class="canvas-content" style='left:300rpx; top:300rpx'> <view class="canvas-list" wx:for="{{awardsList}}" wx:key="un...原创 2019-06-19 18:59:22 · 1076 阅读 · 0 评论 -
微信小程序之---------获取手机验证码
完成手机验证码的功能:(1)效果图如下:(开始发送验证码) (重新发送验证码)(2)需求及思路说明:输入正确的11位手机号,使用正则校验。 校验手机号的归属地----北京移动(这个根据需求而定) 点击 “获取验证码” ,获取成功与失败,都会以弹框的形式展现,完成倒计时。 倒计时为 ‘0’ 的时候,按钮文字变成 “重新发送” 当按钮是 “获取验证码” 和 “重新发送...原创 2019-06-09 08:51:00 · 4118 阅读 · 4 评论 -
微信小程序之----------卡片收缩
(1)首先来看下最终的效果图效果图的描述:点击当前卡片下的箭头,当前卡片展开,别的卡片收缩。 当前卡片展开,点击别的卡片当前卡片先收起,别的卡片在展开。思路如下:在data里面设置一个开关,is_show,默认为false,不展开。account是后端返回的数组,index是索引值(通过e拿到的)。点击后判断当前是否展开,-----如果当前的展开:就让所有的收缩...原创 2019-06-08 19:32:30 · 1542 阅读 · 1 评论 -
微信小程序之----------表单组件input输入框
(1) placeholder-class 和 placeholder-style 的区别:placeholder-style 用来改变 input输入框里面设置的 placeholder值的字体颜色placeholder-class 相当于添加一个改变placeholder的类<view class='item'> <view class='titl...原创 2019-06-08 11:21:52 · 4909 阅读 · 0 评论 -
bindtap和catchtap的区别
(1)介绍事件:bindtap 和 catchtap 都属于点击事件,绑定之后,点击组件是可以触发这个函数的。bindtap :子元素使用bindtap绑定事件后,执行的时候,会冒泡到父元素(触发父元素上绑定的bingtap事件)catchtap :不会冒泡到父元素上,阻止事件冒泡(2)如何使用该事件:.wxml 页面写入: <view> <...原创 2019-05-30 14:28:30 · 20252 阅读 · 0 评论 -
wxs模块的使用
WXS模块:(1)wxs代码可以编写在wxml文件中的<wxs>标签内,或以.wxs为后缀的文件内。(2)每一个.wxs文件和<wxs>标签都是一个单独的模块(3)每个模块都有自己独立的作用域。(即:在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见)(4)一个模块想要对外暴露其内部的私有变量与函数,只能通过module.exports实现。...原创 2019-06-16 11:40:20 · 634 阅读 · 0 评论 -
onLoad 和onShow的 区别
onLoad 页面加载的时候触发,只触发一次;从二级页面回来时不会触发。onShow 页面从哪里进来,只要返回该页面就会加载;从二级页面回来时会触发的。...原创 2019-06-25 14:58:28 · 7487 阅读 · 0 评论 -
不同入口进入,option带的参数问题
问题描述:今天遇到个问题,页面加载的时候,需要拿到onload里面传过来的 show_tip的值,然后执行getShowTip()方法,但是从别的入口进入的话,也是需要执行getShowTip()方法的(在onShow里面执行的)。但是从别的入口进来的时候,拿不到show_tip的值。解决方法如下:onLoad(){ if (option.show_tip) { ...原创 2019-07-23 19:15:18 · 733 阅读 · 0 评论 -
微信小程序中 会话内消息卡片上的send-message-title在不同手机上的显示问题
问题描述:(1)会话消息的标题在安卓上正常显示(2)在ios上 有点儿问题 (未给卡片设置标题,ios上还是会显示,但是安卓上面正常)解决办法:把后端返回来的值做个判断。send-message-title="{{send_message_tit==''?' ':send_message_tit}}"判断返回的值 是否为空,空的话,就让标题为空格(为了兼...原创 2019-07-23 18:29:18 · 6030 阅读 · 0 评论 -
逆向判断
需求:如果reLogin为true,需要强制重新登录;reLogin为false,不需要强制重新登录。一般的话,像我就会直接写:var reLogin;if(option.reLogin == 'true'){ reLogin = option.reLogin;}但是,当我师傅帮我检查代码的时候,发现并告诉我你这样写是有问题的:因为这个页面会有好几个入口,如果是从...原创 2019-07-06 16:59:25 · 288 阅读 · 0 评论 -
如何通过判断屏幕高度来显示不确定高度的广告呢?
“如何通过判断屏幕高度来显示不确定高度的广告呢?”这句话儿听着有点儿绕口,但是呢,理解分两步:(1)判断屏幕高度(2)显示不确定高度的广告-------------------------------------就是这样的,下面就来实现哈。先来看下效果图:(1)首先使用微信小程序获取手机可视区域屏幕的高度:demo.wxml 和 demo.js<bloc...原创 2019-07-06 17:54:17 · 322 阅读 · 0 评论 -
微信小程序 获取用户信息
<button open-type='getUserInfo' bindgetuserinfo='getUserMsg'>获取用户信息</button>getUserMsg: function(e) { // 获取用户信息 console.log(e); var msg = JSON.parse(e.detail.rawData); cons...原创 2019-06-22 03:16:54 · 251 阅读 · 0 评论 -
微信小程序 获取用户端的唯一标识
微信登录:获取微信用户的唯一标识id。基本流程如下:(1)通过wx.login( ) 获取用户的code值 (2)拿到用户的code值,通过wx.request( ) 请求微信接口(https://api.weixin.qq.com/sns/jscode2session)服务,请求传参(code、appid、appsecret、grant_type) (3)请求接口后,就可以得到 o...原创 2019-06-22 02:35:42 · 6368 阅读 · 2 评论 -
微信小程序中 父子组件、父子组件传值
(1)父子组件传值:父组件(food)调用子组件(header)的时候给子组件绑定属性(父组件要传的 food_title) 在子组件的properties里面接收父组件传过来的数据还是以一节组件博客为例,给header里面传值:组件header.js里面:// 将需要传的值放在properties里面properties: { title01:String},组...原创 2019-06-22 01:37:36 · 252 阅读 · 0 评论 -
微信小程序 里面自定义组件
在小程序里面,我们有时候也会遇到需要我们自己去定义组件,下面就实现下自己写的组件:新建header组件:(截图如下)组件header.wxml里面:<!--pages/components/header/header.wxml--><view class='header'> {{header_tit}}</view>组件heade...原创 2019-06-22 01:00:31 · 165 阅读 · 0 评论 -
微信小程序之----------rpx单位介绍
我们常用的单位如下:px、rpx、rem、百分比px (pixel )是我们写网页通用的单位,像素px是相对显示器屏幕分辨率而言的。rpx (responsive pixel 自适应像素)是微信小程序里面的单位,rpx可以根据屏幕宽度进行自适应。rem(root em-quads)规定屏幕宽为750rpx、如在iphone6 下,屏幕的宽度为375px,则 750...原创 2019-05-30 11:17:45 · 493 阅读 · 0 评论