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

微信小程序实现分享至朋友圈方法

分享到朋友圈的展示形式是小程序logo＋小程序名称微信小程序直接分享到朋友圈的实现：方法很简便：在js中添加onShareTimeline()函数即可，这一分享是要有前提的，从小程序开发文档，可以看到，基础库得从2.11.3开始才支持分享至朋友圈的，如果没更新基础库会出现以下灰色的。更改基础库，加入分享代码既可，重新提交版本审核既可注意事项"shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮，显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮示例代码wx.showShareMenu({ withShareTicket:true, menus:['shareAppMessage','shareTimeline'] })

小程序登录、用户信息相关接口调整以及获取用户信息方法

16天前

103 0

为优化用户的使用体验，平台将进行以下调整：2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持（覆盖微信7.0.9以上版本），考虑到开发者在低版本中有获取用户头像昵称的诉求，对于未支持getUserProfile的情况下，开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试，开发者可下载该版本进行改造。小游戏不受本次调整影响。一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID若小程序已在微信开放平台进行绑定，原wx.login接口获取的登录凭证若需换取unionID需满足以下条件：如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用2月23日后，开发者调用wx.login获取的登录凭证可以直接换取unionID，无需满足以上条件。回收wx.getUserInfo接口可获取用户个人信息能力4月13日后发布的新版本小程序，开发者调用wx.getUserInfo或将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。即wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。此外，针对scope.userInfo将做如下调整：若开发者调用wx.authorize接口请求scope.userInfo授权，用户侧不会触发授权弹框，直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态，会直接读取到scope.userInfo为true新增getUserProfile接口若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，该接口从基础库2.10.4版本开始支持，该接口只返回用户个人信息，不包含用户身份标识符。该接口中desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认，请开发者妥善保管用户快速填写的头像昵称，避免重复弹窗。插件用户信息功能页插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式，不作调整。用户在用户信息功能页中授权之后，插件就可以直接调用 wx.login 和 wx.getUserInfo 。三、最佳实践调整后，开发者如需获取用户身份标识符只需要调用wx.login接口即可。开发者若需要在界面中展示用户的头像昵称信息，可以通过组件进行渲染，该组件无需用户确认，可以在界面中直接展示。在部分场景（如社交类小程序）中，开发者需要在获取用户的头像昵称信息，可调用wx.getUserProfile接口，开发者每次通过该接口均需用户确认，请开发者妥善处理调用接口的时机，避免过度弹出弹窗骚扰用户。小程序获取用户信息方法获取头像昵称获取头像昵称 {{userInfo.nickName}} Page({ data:{ userInfo:{}, hasUserInfo:false, canIUseGetUserProfile:false, }, onLoad(){ if(wx.getUserProfile){ this.setData({ canIUseGetUserProfile:true }) } }, getUserProfile(e){ //推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认 //开发者妥善保管用户快速填写的头像昵称，避免重复弹窗 wx.getUserProfile({ desc:'用于完善会员资料',//声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写 success:(res)=>{ this.setData({ userInfo:res.userInfo, hasUserInfo:true }) } }) }, getUserInfo(e){ //不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息 this.setData({ userInfo:e.detail.userInfo, hasUserInfo:true }) }, })

微信小程序如何默认按钮button去掉默认样式

2021-03-20

185 0

微信小程序和HTML去掉按钮样式不一样：按钮可以加下以下样式去掉带有虚边的样式button::after{ border:none; }修改button按钮disabled为true时会出现灰色字体浅灰色背景的样式button[disabled]:not([type]){ background-color:#fff; color:#1e82d2; }修改button按钮点击时样式//点击时样式 .button-hover{ color:rgba(0,0,0,0.6); background-color:#fff; }

微信小程序时间点击页面获取用户头像信息

2021-02-08

148 0

微信小程序获取头像信息必须使用点击按钮来获取，这个实际也是，只是想法思路不一样，我们可以把背景设置成透明，当用户点击屏幕触发按钮，这里构建一个透明按钮，宽高通过获取手机界面宽高，来赋予。letsysInfo=wx.getSystemInfoSync(); //获取微信界面大小 letscreenWidth=sysInfo.screenWidth; letscreenHeight=sysInfo.screenHeight; constwxLoginBtn=wx.createUserInfoButton({ type:'text', text:'', style:{ left:0, top:0, width:screenWidth, height:screenHeight, lineHeight:40, backgroundColor:'#00000000', color:'#ffffff', textAlign:'center' } }) wxLoginBtn.onTap((res)=>{ console.log(res.userInfo) })

小程序自定义轮播图样式

2020-04-05

1162 0

小程序自定义轮播图样式以下是各案例，仅供大家参考。效果展示：index.wxml代码： {{item.ad_name}} index.js代码：constapp=getApp() Page({ data:{ now:'', banner:[], circular:true, indicatorDots:false, autoplay:true, interval:4000, duration:800, swiperCurrent:0, }, swiperChange(e){ letcurrent=e.detail.current; //console.log(current,'轮播图') letthat=this; that.setData({ swiperCurrent:current, }) }, //事件处理函数 bindViewTap:function(){ }, onLoad:function(){ this.getBanner();//获取轮播图 }, //轮播 getBanner:function(){ varthat=this wx.request({ url:app.AppUrl+'/getBanner', success(res){ that.setData({ banner:res.data.res_banner, }) } }) }, })index.wxss代码：.lunbo{width:96%;margin-left:2%;height:350rpx;background:#000;float:left;border-radius:15rpx;overflow:hidden;position:relative;} .lunboswiper{width:100%;height:350rpx;} .lunboimage{width:100%;height:350rpx;display:block;border-radius:15rpx;} .lunbo.name{background:linear-gradient(transparent,rgba(0,0,0,.1)20%,rgba(0,0,0,.2)35%,rgba(0,0,0,.3)65%,rgba(0,0,0,.4)); width:750rpx; position:absolute; bottom:-2rpx; left:0px;} .lunbo.nameview{ width:500rpx; color:#fff; padding-left:20rpx; padding-bottom:10rpx; padding-top:10rpx; font-size:30rpx; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:1; } .dots{ position:absolute; right:0; bottom:20rpx; display:flex; } .dots.dot{ margin:08rpx; width:8rpx; height:8rpx; background:rgba(255,255,255,0.5); border-radius:8rpx; transition:all.6s; } .dots.dot.active{ width:24rpx; background:#fff; }

微信小程序跳转到外部、其他小程序

2020-04-04

761 0

微信小程序跳转到外部、其他小程序app.json文件，添加小程序appId"navigateToMiniProgramAppIdList":[ "wx867ea05eaf079b91", "wx18a2ac992306a5a4" ]WXML文件：其他小程序 js代码：openwx:function(){ wx.navigateToMiniProgram({ appId:'wx887aa15eac079b91', path:'pages/index/index', extraData:{ from:'xxxxx' }, envVersion:'release', success(res){ //打开其他小程序成功同步触发 wx.showToast({ title:'跳转成功' }) } }) },

小程序实现分类内容下拉刷新，上拉加载更多

2020-04-01

807 0

效果演示：小程序上拉加载更多，下来刷新，在项目开发中是最常见，以下是一个简单的案例，供大家参考wxml文件代码: {{item.book_cate}} {{item.book_cate}} {{item.name}} {{item.desc}} +在线阅读 json文件代码："enablePullDownRefresh": true, 开启小程序下拉刷新{ "enablePullDownRefresh":true, "usingComponents":{} }js文件代码://pages/book/book.js constapp=getApp() varpage=1;//设置默认页码 Page({ /** *页面的初始数据 */ data:{ category:[], tags:'3', art:[] }, /** *生命周期函数--监听页面加载 */ onLoad:function(options){ this.category();//查询分类标签 this.getArt(); }, /** *生命周期函数--监听页面初次渲染完成 */ onReady:function(){ }, /** *生命周期函数--监听页面显示 */ onShow:function(){ }, /** *生命周期函数--监听页面隐藏 */ onHide:function(){ }, /** *生命周期函数--监听页面卸载 */ onUnload:function(){ }, /** *页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh:function(){ //显示顶部刷新图标 wx.showNavigationBarLoading(); varthat=this; vartags=that.data.tags page=1; wx.request({ url:app.AppUrl+'/get_book/cate_name/'+tags+'?page='+page, success:function(res){ that.setData({ art:res.data.result, }) //隐藏导航栏加载框 wx.hideNavigationBarLoading(); //停止下拉动作 wx.stopPullDownRefresh(); } }) }, /** *页面上拉触底事件的处理函数 */ onReachBottom:function(){ //显示加载图标 wx.showLoading({ title:'玩命加载中', }) //页数+1 page=page+1; varthat=this; vartags=that.data.tags wx.request({ url:app.AppUrl+'/get_book/cate_name/'+tags+'?page='+page, success:function(res){ varoldData=that.data.art;//获取旧的数据 varnewData=res.data.result;//获取旧的数据 that.setData({ art:oldData.concat(newData) }) //隐藏加载框 wx.hideLoading(); } }) }, /** *用户点击右上角分享 */ onShareAppMessage:function(){ }, //查询分类标签 category:function(){ varthat=this wx.request({ url:app.AppUrl+'/getbookcate', success(res){ that.setData({ category:res.data.result, }) } }) }, //获取文章 getArt:function(){ vartags=this.data.tags; varthat=this wx.request({ url:app.AppUrl+'/get_book/cate_name/'+tags+'/page='+page, success(res){ that.setData({ art:res.data.result, }) } }) }, //点击获取分类文章 btn_cate:function(e){ vartags=e.currentTarget.dataset.id varthat=this that.setData({ tags:tags }) page=1; wx.request({ url:app.AppUrl+'/get_book/cate_name/'+tags+'?page='+page, success(res){ that.setData({ art:res.data.result, }) } }) } })wxss样式文件代码：page{ width:100%; height:100%; } .out{ width:100%; height:100%; display:flex; flex-direction:row-reverse; } .left{ width:18%; height:100%; border-right:2rpxsolid#ccc; position:fixed; left:0px; top:0px; } .nav-item{ text-align:center; font-size:32rpx; padding:30rpx0; } .active{ color:#fb7299; border-left:3pxsolid#fb7299; } .right{ width:76%; height:100%; padding:20rpx; text-align:center; } .book-list{ width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; } .book-item{ width:48%; margin:10rpx0; border:1rpxsolid#ddd; } .bookimg{ width:100%; } .bookimgimage{ width:100%; display:block; height:612rpx; } .bookname{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:1; font-size:28rpx; text-align:left; padding:5rpx0; color:#333; font-weight:bold; padding-left:15rpx; padding-right:15rpx; } .bookproject{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:2; font-size:20rpx; text-align:left; padding:3rpx0; color:#555; padding-left:15rpx; padding-right:15rpx; } .bookdesc{ overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; text-overflow:ellipsis; -webkit-line-clamp:1; text-align:right; font-size:24rpx; color:#999; padding-bottom:22rpx; padding-right:15rpx; padding-top:12rpx; }

微信小程序刷新当前页面，并跳转到其他页面

2020-03-31

708 0

刷新当前页面：//首先判断当前页面加载的所有页面的数组，数组中最后一个就是当前页面，然后onload当前页面。 if(getCurrentPages().length!=0){ //刷新当前页面的数据 getCurrentPages()[getCurrentPages().length-1].onLoad() }刷新当前页面并跳转到指定页面：这里以跳转到tobar页面为演示：//首先判断当前页面加载的所有页面的数组，数组中最后一个就是当前页面，然后onload当前页面。 if(getCurrentPages().length!=0){ //刷新当前页面的数据 getCurrentPages()[getCurrentPages().length-1].onLoad() //关闭当前页面，跳转到应用内的某个页面。 wx.switchTab({ url:'/pages/new/new' }) }

小程序富文本解析器towxml3.0的使用

2020-03-26

1362 0

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。特色：1、可控制的音频播放器（可自行调节样式，解决原生audio在部分iPhone上不能自动播放的情况）2、支持代码语法高亮3、支持emoji表情4、支持上标、下标、下划线、删除线、表格、视频、图片（几乎所有html元素）……5、支持typographer字符替换6、多主题动态支持7、极致的中文排版优化8、Markdown TodoList下载地址：https://github.com/jyblogs/towxml或者：git clone git@github.com:jyblogs/towxml.git使用流程：1、下载，解压，复制至小程序根目录2、引入库/app.js//app.js App({ //引入`towxml3.0`解析方法 towxml:require('/towxml/index') }) 3.在页面配置文件中引入towxml组件/pages/index/index.json { "usingComponents":{ "towxml":"/towxml/towxml" } }4. 在页面中插入组件/pages/index/index.wxml 5. 解析内容并使用/pages/index/index.js//获取应用实例 constapp=getApp(); Page({ data:{ isLoading:true,//判断是否尚在加载中 article:{}//内容数据 }, onLoad:function(){ letresult=app.towxml(`#Markdown`,'markdown',{ base:'https://xxx.com',//相对资源的base路径 theme:'dark',//主题，默认`light` events:{//为元素绑定的事件方法 tap:(e)=>{ console.log('tap',e); } } }); //更新解析数据 this.setData({ article:result, isLoading:false }); } })str 必选，html或markdown字符串type 必选，需要解析的内容类型html或markdownoptions [object] 可选，可以该选项设置主题、绑定事件、设置base等APIapp.towxml(str,type,options)有三个参数base [string] 可选，用于指定静态相对资源的base路径。例如：https://xx.com/static/theme [string] 可选，默认:light，用于指定主题'light'或'dark'，或其它自定义events [object] 可选，用于为元素绑定事件。key为事件名称，value则必须为一个函数。例如:{tap:e=>{console.log(e)}}towxml3.0 支持以下功能：echarts图表，默认禁用，需自行构建以开启此功能LaTeX数学公式，默认禁用，需搭建解析服务并自行构建以开启此功能yuml图表，默认禁用，需要搭建解析服务并自行构建以开启此功能highlight代码高亮，默认开启（默认仅开启bash、javascript、json、python、html、css、php、scss、shell），其它语言高亮支持需自行构建以开启

小程序头部滚动导航，置顶头部导航

2020-03-25

657 0

小程序头部滑动导航例子，主要运用微信的 scroll-view 和样式white-space: nowrap;wxml文件代码：导航1 导航2 导航3 导航4 导航5 导航2 导航3 导航4 导航5 导航2 导航3 导航4 导航5 导航2 导航3 导航4 导航5 1 wxss代码：.totle-nav{ margin:0; padding:0; width:100%; height:80rpx; position:fixed; left:0rpx; top:0rpx; transform:translateZ(0); z-index:999; background:#fff; border-bottom:1pxsolid#ddd; overflow:hidden; } .totle-nav.scroll-wrap{ white-space:nowrap; display:inline-block; background-color:#fff; font-size:32rpx; width:100%; box-sizing:border-box; } .totle-nav.scroll-wraptext{ display:inline-block; padding:10px04px0; margin:018rpx; color:#333; box-sizing:border-box; } .totle-nav.scroll-wraptext.active{ border-bottom:3pxsolid#fb7299; color:#fb7299; } .new_list{width:100%;float:left;padding-top:100rpx;} .new_item{width:100%;float:left;margin-bottom:20rpx;border-bottom:solid3px#edeef0;padding-bottom:10rpx;}最终效果：

微信小程序，滑动选项卡案例

2019-11-19

942 0

微信小程序，滑动选项卡：1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。2、swiper组件的current组件用于控制当前显示哪一页3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页效果图：wxml代码：推荐电视剧电影综艺动漫 1 2 3 4 5 wxss代码：.tabbox{width:100%;float:left;} .tab-h{ height:65rpx; width:100%; box-sizing:border-box; overflow:hidden; white-space:nowrap; } .tabbox.tab-item{ color:#999999; font-size:28rpx; display:inline-block; float:left; padding-top:10rpx;padding-left:22rpx;padding-right:22rpx;line-height:32rpx; position:relative; } .tabbox.tab-itemview{display:none;width:8rpx;height:8rpx;border-radius:50%;background:#293844;position:absolute;top:0rpx;right:10rpx} .tabbox.tab-item.active{ color:#293844;font-size:32rpx; font-weight:bold; position:relative; } .tabbox.tab-item:nth-child(1){padding-left:30rpx;} .tabbox.tab-item.activeview{display:block;} .tabbox.tab-content{ margin-top:0rpx; } .tabbox.scoll-h{ height:100%; }js代码：constapp=getApp() Page({ data:{ //切换 winHeight:"",//窗口高度 currentTab:0,//预设当前项的值 scrollLeft:0,//tab标题的滚动条位置 //切换 }, //切换 //滚动切换标签样式 switchTab:function(e){ this.setData({ currentTab:e.detail.current }); this.checkCor(); }, //点击标题切换当前页时改变样式 swichNav:function(e){ varcur=e.target.dataset.current; if(this.data.currentTaB==cur){ returnfalse; }else{ this.setData({ currentTab:cur }) } }, //判断当前滚动超过一屏时，设置tab标题滚动条。 checkCor:function(){ if(this.data.currentTab>4){ this.setData({ scrollLeft:300 }) }else{ this.setData({ scrollLeft:0 }) } }, /** *生命周期函数--监听页面卸载 */ onLoad:function(){ varthat=this; //高度自适应 wx.getSystemInfo({ success:function(res){ varclientHeight=res.windowHeight, clientWidth=res.windowWidth, rpxR=750/clientWidth; varcalc=clientHeight*rpxR-180; console.log(calc) that.setData({ winHeight:calc }); } }); }, })

微信小程序置顶导航，替代原生导航栏

2019-11-16

850 0

效果图：思路：Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏，wx.getSystemInfoSync获取可使用窗口高度wxml代码：哪吒之魔童降世 wxss代码：.header{width:100%;height:58rpx;position:fixed;left:0rpx;top:0%;background:#fff;z-index:111} .searchbtn{width:50%;height:58rpx;margin-top:2%;float:left;margin-left:30rpx;border-radius:45rpx;background:#f5f5f5;} .search_pic{display:block;width:34rpx;height:34rpx;float:left;margin-top:3%;margin-left:18%;} .search_word{font-size:24rpx;float:left;color:#bbbbbb;font-family:'微软雅黑';line-height:58rpx;text-align:left;margin-left:8rpx;} .history{display:block;width:34rpx;height:34rpx;float:left;margin-top:3.5%;margin-left:30rpx;} .historyimage{width:34rpx;height:34rpx;}app.json修改window下navigationStyle 为 custom"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor":"#fff", "navigationBarTitleText":"影视", "navigationBarTextStyle":"black", "navigationStyle":"custom" },最后，wx.getSystemInfoSync获取可使用窗口高度，app.js下，加上以下代码//app.js App({ globalData:{ statusBarHeight:wx.getSystemInfoSync()['statusBarHeight'] },页面js文件添加到data:Page({ data:{ statusBarHeight:app.globalData.statusBarHeight, } })

微信小程序-实现旋转木马轮播功能

2019-11-16

944 0

效果图：技术要点：自动滚动+手动拖拽（原生组件帮我们完成 Property：autoplay）面板指示点（原生组件帮我们完成 Property：indicator-dots）左右可以露出非Active状态图的边缘（即Quiet状态，后文class会以这两个名字定义）（原生组件帮我们完成 Property：previous-margin、next-margin）图片滚动到中心位置放大，滚动出去缩小（我们手写实现，利用技术点中提到的滚动回调+条件渲染。其中滚动回调用 Property：bindchange）.wxml 代码: .js 代码：Page({ data:{ statusBarHeight:app.globalData.statusBarHeight, imgUrls:[ '/pages/asset/images/index_03.jpg', '/pages/asset/images/index_03.jpg', '/pages/asset/images/index_03.jpg', '/pages/asset/images/index_03.jpg' ], indicatorDots:false, swiperIndex:0,//这里不写第一次启动展示的时候会有问题 swiperCurrent:0, interval:3000, },.wxss代码：.lunbo{width:100%;float:left;margin-top:27rpx;} .swiperClass{ margin:0; } .slide-image{ width:100%; height:100%; border-radius:10px; position:relative; } image.active{ transform:none; transition:all0.2sease-in0s; } image.quiet{ transform:scale(0.95333333); transition:all0.2sease-in0s; }

微信小程序API五种页面跳转方法总结

2019-07-20

1544 0

//保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。 //注意：调用navigateTo跳转时，调用该方法的页面会被加入堆栈，但是redirectTo wx.navigateTo({ url:'page/home/home?user_id=111' }) //跳转到页面A wx.navigateBack({ delta:2 }) //关闭当前页面，跳转到应用内的某个页面。 wx.redirectTo({ url:'page/home/home?user_id=111' }) //跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。 wx.switchTab({ url:'page/index/index' }) //关闭所有页面，打开到应用内的某个页面。 wx.reLanch({ url:'page/home/home?user_id=111' })

微信小程序实现购物车全选功能

2019-07-19

1768 0

微信小程序购物全选与反选，CheckBox（全选、全不选）的操作！效果图：wxxml文件： {{item.text}} ￥{{item.price}}.00 全选总计：4445.00 去结算(2件) .wxss文件：.jybox{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; background:#f9f7f7; overflow:hidden; padding-bottom:130rpx; } .orderlist{ width:98%; height:100%; background:#fff; margin-top:15rpx; padding-top:15rpx; padding-bottom:15rpx; } .order_left{ width:35%; float:left; } .cheack{ border-radius:50%; width:40rpx; height:40rpx; float:left; margin-top:64rpx; margin-left:14rpx; } checkbox.wx-checkbox-input{ border-radius:50%;/*圆角*/ width:40rpx;/*背景的宽*/ height:40rpx;/*背景的高*/ } /*选中后的背景样式（红色背景无边框可根据UI需求自己修改）*/ checkbox.wx-checkbox-input.wx-checkbox-input-checked{ border:none; background:red; } /*选中后的对勾样式（白色对勾可根据UI需求自己修改）*/ checkbox.wx-checkbox-input.wx-checkbox-input-checked::before{ border-radius:50%;/*圆角*/ width:40rpx;/*选中后对勾大小，不要超过背景的尺寸*/ height:40rpx;/*选中后对勾大小，不要超过背景的尺寸*/ line-height:40rpx; text-align:center; font-size:30rpx;/*对勾大小30rpx*/ color:#fff;/*对勾颜色白色*/ background:transparent; transform:translate(-50%,-50%)scale(1); -webkit-transform:translate(-50%,-50%)scale(1); } .order_leftimage{ width:200rpx; height:200rpx; float:left; } .order_right{ width:63%; float:left; padding-right:2%; } .order_title{ color:#333; font-size:30rpx; line-height:36rpx; text-align:left; padding-top:32rpx; } .order_price{ padding-top:22rpx; color:#fa1f00; font-size:34rpx; } .ininc{ color:#fa1f00; font-size:22rpx; display:inline-block; } .order{ width:100%; height:100rpx; background:#fff; position:fixed; left:auto; right:auto; bottom:0px; border-top:1pxsolidrgb(211,206,206); } .orderview{ width:33.33%; height:100rpx; text-align:center; line-height:100rpx; float:left; } .price{ width:43.33%!important; color:#333; font-size:30rpx; } .pricetext{ font-size:30rpx; color:#fa1f00; font-weight:bold; } .orderingtext{ font-size:20rpx; color:#fa1f00; } .ordering{ color:#fff; font-size:30rpx; background:#e72316; } .orderingtext{ font-size:20rpx; color:#fff; } .all{ width:23.33%!important; font-size:30rpx; color:#555; }.js文件：//pages/goods/goods.js Page({ /** *页面的初始数据 */ data:{ select_all:false, listData:[ {code:"1",price:"134",text:"layui-经典模块经典模块化前端化前端UI框架1",img:"https://m.360buyimg.com/mobilecms/jfs/t1/16216/5/12819/108809/5c9adf66E05f22e3f/eff4ca3ef89cd143.jpg!q70.jpg"}, {code:"2",price:"14",text:"layui-经典模块化经典模块化前端前端UI框架2",img:"https://m.360buyimg.com/mobilecms/jfs/t1/16216/5/12819/108809/5c9adf66E05f22e3f/eff4ca3ef89cd143.jpg!q70.jpg"}, {code:"3",price:"132",text:"layui-经典模块化前经典模块化前端端UI框架3",img:"https://m.360buyimg.com/mobilecms/jfs/t1/16216/5/12819/108809/5c9adf66E05f22e3f/eff4ca3ef89cd143.jpg!q70.jpg"}, {code:"4",price:"234",text:"layui-经典模块化前经典模块化前端端UI框架4",img:"https://m.360buyimg.com/mobilecms/jfs/t1/16216/5/12819/108809/5c9adf66E05f22e3f/eff4ca3ef89cd143.jpg!q70.jpg"} ], batchIds:'',//选中的ids }, /** *生命周期函数--监听页面加载 */ onLoad:function(options){ }, /** *生命周期函数--监听页面初次渲染完成 */ onReady:function(){ }, /** *生命周期函数--监听页面显示 */ onShow:function(){ }, /** *生命周期函数--监听页面隐藏 */ onHide:function(){ }, /** *生命周期函数--监听页面卸载 */ onUnload:function(){ }, /** *页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh:function(){ }, /** *页面上拉触底事件的处理函数 */ onReachBottom:function(){ }, /** *用户点击右上角分享 */ onShareAppMessage:function(){ }, selectall:function(e){ console.log(e) varthat=this; vararr=[];//存放选中id的数组 for(leti=0;i

微信小程序单图上传和多图上传

2019-06-23

1598 0

图片上传主要用到1、wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照。参数Object object属性类型默认值必填说明countnumber9否最多可以选择的图片张数sizeTypeArray.['original', 'compressed']否所选的图片的尺寸sourceTypeArray.['album', 'camera']否选择图片的来源successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）object.sizeType 的合法值值说明最低版本original原图compressed压缩图object.sourceType 的合法值值说明最低版本album从相册选图camera使用相机object.success 回调函数参数Object res属性类型说明最低版本tempFilePathsArray.图片的本地临时文件路径列表tempFilesArray.图片的本地临时文件列表1.2.0res.tempFiles 的结构属性类型说明pathstring本地临时文件路径sizenumber本地临时文件大小，单位 Bwx.chooseImage({ count:1, sizeType:['original','compressed'], sourceType:['album','camera'], success(res){ //tempFilePath可以作为img标签的src属性显示图片 consttempFilePaths=res.tempFilePaths } })2、wx.uploadFile(Object object)将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中content-type为multipart/form-data。使用前请注意阅读相关说明。参数Object object属性类型默认值必填说明urlstring是开发者服务器地址filePathstring是要上传文件资源的路径namestring是文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容headerObject否HTTP 请求 Header，Header 中不能设置 RefererformDataObject否HTTP 请求中其他额外的 form datasuccessfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）object.success 回调函数参数Object res属性类型说明datastring开发者服务器返回的数据statusCodenumber开发者服务器返回的 HTTP 状态码返回值UploadTask基础库 1.4.0 开始支持，低版本需做兼容处理。一个可以监听上传进度进度变化的事件和取消上传的对象示例代码wx.chooseImage({ success(res){ consttempFilePaths=res.tempFilePaths wx.uploadFile({ url:'https://example.weixin.qq.com/upload',//仅为示例，非真实的接口地址 filePath:tempFilePaths[0], name:'file', formData:{ 'user':'test' }, success(res){ constdata=res.data //dosomething } }) } })小程序案例：.wxml 文件：选择图片 .js 文件（1）单图上传photo:function(e){ wx.chooseImage({ count:1,//默认上传个数 sizeType:['original','compressed'], sourceType:['album'], success(res){ //tempFilePath可以作为img标签的src属性显示图片 varalbumPaths=res.tempFilePaths[0] console.log('图片地址名称'+albumPaths); wx.uploadFile({ url:app.appUrl+'img', filePath:albumPaths, name:'img', formData:{ 'nickName':'123',//其他参数 'openid':'xxssdazcs5gxxxaa',//其他参数 }, success(res){ console.log(res) } }) } }) },（2）多图上传（相比单图上传，多了个for遍历）photo:function(e){ wx.chooseImage({ count:3,//默认上传个数 sizeType:['original','compressed'], sourceType:['album'], success(res){ //tempFilePath可以作为img标签的src属性显示图片 varalbumPaths=res.tempFilePaths for(vari=0;ifile('img'); $info=$file->move(ROOT_PATH.'public'.DS.'static/uploads/ceshi'); }

微信小程序 form 表单提交

2019-06-09

1222 0

表单。将组件内的用户输入的switchinputcheckboxsliderradiopicker提交。当点击form表单中 form-type 为 submit 的button组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。.wxml代码姓名联系方式性别男女预约商品鞋子衣服" 手机笔记本留言备注预约 .wxmlformSubmit:function(e){ varname=e.detail.value.name vartel=e.detail.value.tel varsex=e.detail.value.sex varobj=e.detail.value.project varproject=""; for(varindexinobj){ project=project+obj[index]+","; } //varproject=e.detail.value.project varmessage=e.detail.value.message varmsg='姓名：'+name+''+'联系电话：'+tel+''+'性别'+sex+''+'预约商品：'+project+''+'留言备注：'+message varthat=this if(name==''|tel==''|sex==''|project==''){ wx.showToast({ title:'必填选项不能为空', icon:'none', duration:2000 }) } if(!(/^(13\d|14\d|15\d|17\d|18[0-9]|19\d)\d{8}$/.test(tel))){ wx.showToast({ title:'手机号不正确', icon:'none', duration:2000 }) returnfalse } wx.request({ url:app.appUrl+'getMessage', data:{ msg:msg, tel:tel }, success(res){ console.log(res) if(res.data.code==700){ wx.showToast({ title:res.data.message, icon:'none', duration:2000 }) }else{ wx.showToast({ title:res.data.message, icon:'success', duration:2000 }) } } }) },

TP5 微信小程序获取手机号，并解密

2019-06-04

2274 0

获取微信用户绑定的手机号，需先调用wx.login接口。因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用button组件的点击来触发。注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。使用方法需要将button组件open-type的值设置为getPhoneNumber，当用户点击并同意之后，可以通过bindgetphonenumber事件回调获取到微信服务器返回的加密数据，然后在第三方服务端结合session_key以及app_id进行解密获取手机号。注意在回调中调用wx.login登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行login；或者在回调中先使用checkSession进行登录态检查，避免login刷新登录态。微信小程序官网代码示例Page({ getPhoneNumber(e){ console.log(e.detail.errMsg) console.log(e.detail.iv) console.log(e.detail.encryptedData) } })可以看到获取的的数据是加密的以下是楼主实现获取并解密示例：前提需要引入官网的扩展包，重命名为wxBizDataCrypt下载地址：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百度云下载：aes-sample.eae1f364.zip（选择PHP的即可）链接：https://pan.baidu.com/s/1bg8AGTu2v1IFbbwfSIYc7Q提取码：wxfv将下载好的解压，复制php的上传到框架vendor目录加密数据解密算法接口如果涉及敏感数据（如wx.getUserInfo当中的 openId 和 unionId），接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据，需要对接口返回的加密数据(encryptedData)进行对称解密。解密算法如下：对称解密使用的算法为 AES-128-CBC，数据采用PKCS#7填充。对称解密的目标密文为 Base64_Decode(encryptedData)。对称解密秘钥 aeskey = Base64_Decode(session_key), aeskey 是16字节。对称解密算法初始向量为Base64_Decode(iv)，其中iv由数据接口返回。微信官方提供了多种编程语言的示例代码（（点击下载）。每种语言类型的接口名字均一致。调用方式可以参照示例。另外，为了应用能校验数据的有效性，会在敏感数据加上数据水印( watermark )微信会对这些开放数据做签名和加密处理。开发者后台拿到开放数据后可以对数据进行校验签名和解密，来保证数据不被篡改。签名校验以及数据加解密涉及用户的会话密钥 session_key。开发者应该事先通过wx.login登录流程获取会话密钥 session_key 并保存在服务器。为了数据不被篡改，开发者不应该把 session_key 传到小程序客户端等服务器外的环境。前端代码：//index.wxxml 啊事实上 index.js getPhoneNumber(e){ //console.log(e.detail); //console.log(e.detail.errMsg) //console.log(e.detail.iv) //console.log(e.detail.encryptedData) variv=e.detail.iv; varencryptedData=e.detail.encryptedData; varthat=this wx.login({ success(res){ console.log(res); wx.request({ url:app.appUrl+'getUserPhone/', data:{ code:res.code, iv:iv, encryptedData:encryptedData }, success(res){ console.log(res) //that.setData({ //resSetup:res.data.resSetup //}) } }) } }) },后端代码：publicfunctiongetUserPhone(){ vendor("wxBizDataCrypt.wxBizDataCrypt"); $code=input(); $appid='wx560b258455222cd2';//企业appid $secret='2552xsxca520a6ac300f45f334a30edd';//企业secret $encryptedData=$code['encryptedData'];//包括敏感数据在内的完整用户信息的加密数据 $jscode=$code['code'];//用户登录授权获取到的code //用code获取sessionkey $access_token='https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$secret.'&js_code='.$jscode.'&grant_type=authorization_code'; $result=$this->curlOpen($access_token); $jsonarr=json_decode($result,true); $sessionKey=$jsonarr['session_key']; $iv=$code['iv']; $pc=new\WXBizDataCrypt($appid,$sessionKey);//注意使用\进行转义 $errCode=$pc->decryptData($encryptedData,$iv,$data); halt($data); } publicfunctioncurlOpen($url){ $curl=curl_init(); curl_setopt($curl,CURLOPT_URL,$url); curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,FALSE); curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,FALSE); if(!empty($data)){ curl_setopt($curl,CURLOPT_POST,1); curl_setopt($curl,CURLOPT_POSTFIELDS,$data); } curl_setopt($curl,CURLOPT_RETURNTRANSFER,1); $output=curl_exec($curl); curl_close($curl); return$output; }

微信小程序动态更换 UI 色及标题

2019-06-04

1438 0

小程序动态修改界面颜色，提升用户体验度，以下十个简单的例子，供大家参考，后端代码不多说，主要是前段实现。后端界面：接口 PHP 代码： publicfunctiongetSetup(){ //首页轮播 $resSetup=db('minwx_setup')->limit(1)->select(); returnjson(['code'=>200,'resSetup'=>$resSetup]); }小程序 index.js 代码：Page({ data:{ resSetup:[], }, onLoad:function(){ this.setup(); }, setup:function(){ //公共样式 varthat=this wx.request({ url:app.appUrl+'getSetup', success(res){ that.setData({ resSetup:res.data.resSetup }) //动态设置页面导航条颜色 wx.setNavigationBarColor({ frontColor:res.data.resSetup[0]['color_tittle'], backgroundColor:res.data.resSetup[0]['color_tb'], }) //动态设置tabBar的整体样式 wx.setTabBarStyle({ color:res.data.resSetup[0]['color_db_title'], selectedColor:res.data.resSetup[0]['color_db_sectitle'], backgroundColor:res.data.resSetup[0]['color_db'] }) } }) //动态设置当前页面的标题 wx.setNavigationBarTitle({ title:res.data.resSetup[0]['title'] }) },

微信小程序使用wxParse解析html

2018-10-14

1630 0

最近项目上遇到在微信小程序里需要显示文章内容，文章内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现。首先我们在github上下载wxParse：https://github.com/icindy/wxParse下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下　　下面是具体的使用步骤1.在app.wxss全局样式文件中，需要引入wxParse的样式表@import"/page/wxParse/wxParse.wxss";2.在需要加载html内容的页面对应的js文件里引入wxParsevarWxParse=require('../../wxParse/wxParse.js');3.通过调用WxParse.wxParse方法来设置html内容success(res){ varcontent=res.data.note_detailRes.content; WxParse.wxParse('content','html',content,that,0); that.setData({ note_detail:res.data.note_detailRes }) }4.在页面中引用模板这样就可以在微信小程序中嵌入html内容了

微信小程序-8 图片等比例缩放获取屏幕尺寸图片尺寸自适应

2017-10-19

900 0

1. index.wxml2.index.js//获取应用实例 varimageUtil=require('../../utils/util.js'); varapp=getApp() Page({ data:{ imagefirstsrc:'http://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接 imagesecondsrc:'http://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接 imagethirdsrc:'http://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg', imagewidth:0,//缩放后的宽 imageheight:0,//缩放后的高 }, onLoad:function(){ }, imageLoad:function(e){ varimageSize=imageUtil.imageUtil(e) this.setData({ imagewidth:imageSize.imageWidth, imageheight:imageSize.imageHeight }) } })3.util.js//util.js functionimageUtil(e){ varimageSize={}; varoriginalWidth=e.detail.width;//图片原始宽 varoriginalHeight=e.detail.height;//图片原始高 varoriginalScale=originalHeight/originalWidth;//图片高宽比 console.log('originalWidth:'+originalWidth) console.log('originalHeight:'+originalHeight) //获取屏幕宽高 wx.getSystemInfo({ success:function(res){ varwindowWidth=res.windowWidth; varwindowHeight=res.windowHeight; varwindowscale=windowHeight/windowWidth;//屏幕高宽比 console.log('windowWidth:'+windowWidth) console.log('windowHeight:'+windowHeight) if(originalScale

微信小程序开发-7【搜索功能】

2017-09-24

827 0

微信小程序开发-7【搜索功能】-案例，结合豆瓣电影api接口页面代码：search.wxml查询你要搜索：{{inputVal}}{{item.text}}加载中...2.search.js//pages/search/search.js Page({ /** *页面的初始数据 */ data:{ inputVal:"", move:[], hidden:true, }, /** *生命周期函数--监听页面加载 */ onLoad:function(options){ }, /** *生命周期函数--监听页面初次渲染完成 */ onReady:function(){ }, /** *生命周期函数--监听页面显示 */ onShow:function(){ }, /** *生命周期函数--监听页面隐藏 */ onHide:function(){ }, /** *生命周期函数--监听页面卸载 */ onUnload:function(){ }, /** *页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh:function(){ }, /** *页面上拉触底事件的处理函数 */ onReachBottom:function(){ }, /** *用户点击右上角分享 */ onShareAppMessage:function(){ }, bindKeyInput:function(e){ this.setData({inputVal:e.detail.value}); }, processSubject(subject){ vartitle=subject.title; vardirectors=subject.directors; vardirectorsStr=""; for(varindexindirectors){ directorsStr=directorsStr+directors[index].name+"/"; } if(directorsStr!=""){ directorsStr=directorsStr.substring(0,directorsStr.length-2); } varcasts=subject.casts; varcastsStr=""; for(varindexincasts){ castsStr=castsStr+casts[index].name+"/"; } if(castsStr!=""){ castsStr=castsStr.substring(0,castsStr.length-2); } vargenres=subject.genres; vargenresStr=""; for(varindexingenres){ genresStr=genresStr+genres[index]+"/"; } if(genresStr!=""){ genresStr=genresStr.substring(0,genresStr.length-2); } varyear=subject.year; vartext="名称："+title+"\n导演："+directorsStr+"\n主演："+castsStr+"\n类型："+genresStr+"\n上映年份："+year+"（中国大陆）"; subject.text=text; }, processSubjects(subjects){ for(vari=0;i