本文实例讲述了微信小程序使用checkbox显示多项选择框功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml <checkbox-group bindchange="checkboxgroupBindchange"><checkbox value="checkbox1">checkbox1</checkbox><checkbox value="checkbox2">checkbox2</checkbox><checkbox value="checkbox3">checkbox3</checkbox> </checkbox-group> <view>提示：{{text}}</view>② index.js Page({data:{// text...
本文实例讲述了微信小程序使用radio显示单选项功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml <radio-group bindchange="radiogroupBindchange"><radio value="radio1">radio1</radio><radio value="radio2">radio2</radio><radio value="radio3">radio3</radio> </radio-group> <view>提示：{{text}}</view>② index.js Page({data:{// text:"这是一个页面"text:}, radiogroupBindchange:function...
本文实例讲述了微信小程序使用progress组件实现显示进度功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml代码如下:<progress percent="100" color="blue" stroke-width="20" show-info active/> progress组件属性说明如下：感兴趣的朋友可以逐一尝试上述属性设置的具体用法。 3、源代码点击此处本站下载。 关于progress组件详细说明可参考官网：https://mp.weixin.qq.com/debug/wxadoc/dev/component/pr...
本文实例讲述了微信小程序使用input组件实现密码框功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml <view style="width:80%; display:flex;"><view>用户名：</view><input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="请输入您的用户名" maxlength="16" type="text" focus="false"/> </view> <view style="width:80%; display:flex;">密 码：<input style="border: 1...
本文实例讲述了微信小程序获取手机网络状态的方法。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml布局文件代码 <view>手机网络状态：{{netWorkType}}</view>index.js逻辑文件代码 Page({data: {netWorkType:},onLoad: function () {var that=thiswx.getNetworkType({success: function(res) {that.setData({netWorkType:res.networkType})}})} })这里使用了wx.getNetworkType函数获取网络连接状态。详细参数...
本文实例讲述了微信小程序swiper组件用法。分享给大家供大家参考，具体如下： 关于视图容器swiper的详细内容可参考官方文档 先来看看运行效果：index.js： Page({data: {imgUrls: [http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg, http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg, http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg],indicatorDots: false,a...
我们经常会在APP下载中看到下载进度条，这个进度条是为了和用户交互，告知用户当前的进度，不然让用户一直处于等待，用户等超过1分钟就会崩溃的，今天代码君就教大家如何在小程序中也制作下载进度条progress进度条是微信小程序的组件，和HTML5的进度条progress类似。 progress属性介绍属性名作用参数值percent进度百分比0~100show-info在进度条右侧显示百分比true/false 默认falseactive进度条从左往右的动画true/false 默认falses...
本文实例讲述了微信小程序使用image组件显示图片的方法。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml代码如下:<image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({data:{// text:"这是一个页面"imageSrc:../../pages/image/img.jpg} })3、源代码点击此处本站下载。 关于image组件的详细说明还可参考官网https://mp.weixin....
本文实例讲述了微信小程使用swiper组件实现图片轮播切换显示功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml： <swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;"><swiper-item><image src="../../pages/images/img1.png" style="display: block;height: 300px;"/></swiper-item><swiper-item><image src="../../pages/images/img2.png" style="dis...
本文实例讲述了微信小程序使用video组件播放视频功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video>② index.js Page({data:{// text:"这是一个页面"},videoErrorCallback: function (e) {console.log(视频错误信息:+e.detail.errMsg);} })3、源代码点击此处本站下载。 关于video组件的详细介绍可参考官网...
本文实例讲述了微信小程序实现点击文字页面跳转功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.js文件 Page({data:{// text:"这是一个页面"},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭} })index.wxml文件 <navigator url="../../pages...
本文实例讲述了微信小程序实现打开内置地图功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml布局文件代码 <button type="default" bindtap="openMap">打开地图</button>index.js逻辑文件代码 Page({openMap:function(){wx.getLocation({type: gcj02, // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标success: function(res){// successwx.openLocation({latitude: res.latitude...
本文实例讲述了微信小程序显示下拉列表功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 app.json文件： {"pages":["views/views","views/navigators/navigator1/navigator1","views/navigators/navigator2/navigator2","views/navigators/navigator3/navigator3","pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleTex...
本文实例讲述了微信小程序获取手机系统信息的方法。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml布局文件代码 <view>手机型号：{{mobileModel}}</view> <view>手机像素比：{{mobileePixelRatio}}</view> <view>窗口宽度：{{windowWidth}}</view> <view>窗口高度：{{windowHeight}}</view> <view>微信设置的语言：{{language}}</view> <view>微信版本号：{{version}}</view>index.js逻辑文件代码 var app =...
本文实例讲述了微信小程序使用audio组件播放音乐功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml代码如下: <audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio>② index.js Page({data: {audioPoster: http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000,audioName: 此时此刻,audioAuthor: ...