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

小程序自定义轮播图样式

2020-04-05

小程序自定义轮播图样式以下是各案例，仅供大家参考。效果展示：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

634 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

646 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

572 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

1097 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

521 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

814 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

722 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

815 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

1420 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

1587 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

1455 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

1002 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

2080 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

1288 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

1514 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

778 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

722 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

微信小程序开发-6【重构：共同文件调用】

2017-09-23

721 0

微信小程序开发-6【重构：共同文件调用有时候页面存在公共的部分，这时候就可以采用调用的方式，去掉重复的页面。1. 新建目录：template,在目录下新建movietpl.wxml文件,复制公共的文件2. 调用

微信小程序开发-5【样式的导入】

2017-09-23

632 0

样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例代码：@import"../move/move.wxss";

微信小程序开发-4【页面查询数据及遍历】

2017-09-23

930 0

微信小程序开发-4【页面查询数据的遍历】1. 在.js文件里面封装一个方法：loadMove:function(){ varpage=this; wx.request({ url:'http://api.douban.com/v2/', header:{ "Content-Type":"json" }, success:function(res){ varsubjects=res.data.subjects; console.log(subjects); page.processSubjects(subjects); page.setData({moves:subjects,hidden:true}); } }) }2.在.js文件里面onLoad: function (options) { }调用改方法*生命周期函数--监听页面加载 */ onLoad:function(options){ this.loadMove(); },3. 页面遍历 {{item.medium}}

微信小程序开发-3【页面加载数据时,显示加载中。。。】

2017-09-23

1323 0

微信小程序开发-3【页面加载数据时,显示加载中。。。】，实现这个功能带来良好的用户体验，以下是案例。页面文件.wxss文件底部加上以下代码加载中... 2. 逻辑文件.js文件加上以下代码：Page({ /** *页面的初始数据 */ data:{ hidden:false },success:function(res){ varsubjects=res.data.subjects; console.log(subjects); page.processSubjects(subjects); page.setData({moves:subjects,hidden:true}); }3. 效果：