网站开发

这篇文章主要介绍了微信小程序使用radio显示单选项功能,涉及针对radio组件事件响应相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下 本文实例讲述了微信小程序使用radio显示单选项功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 ① index.wxml <radio-group>  <radio>radio1</radio>  <radio>radio2</radio>  <radio>radio3</radio></radio-group><view>提示：{{text}}</view> 登录后复制 ② index.js Page({  data:{   // text:"这是一个页面"   text:''  },   radiogroupBindchange:function(e){   console.log(e);   this.setData({    text:'您选择了'+e.detail.value   })  } }) 登录后复制 3、源代码 关于radio组件的更多详细说明还可参考官网：…

微信小程序正式上线，很多地方在刷屏，我们可以看见很多人都在使用微信小程序，但是不少用户不会微信小程序怎么开发？下面带来微信小程序开发实战教程，手把手教你开发跑步微信小程序，一起来了解下吧。 软件名称： 微信小程序开发工具 2017.09.01 (1.01.170901)  32位官方安装包 软件大小： 38MB 更新时间： 2017-09-01 一、准备工作 1、注册一个小程序账号，得用一个没注册过公众号的邮箱注册。 2、注册过程中需要很多认证，有很多认证，比较繁琐，如果暂时只是开发测试，不进行提审、发布的话，只要完成营业执照号填写就可以了，不需要完成微信认证。 3、注册完账号，登录，在主页面左边列表中点击设置，然后再设置页面中选开发设置就可以看到AppID，用于登录开发工具。 主页面 设置页面 二、开发工具 可以到官网下载开发工具下载 开发工具编辑页面 三、开始项目 打开开发者工具，选择小程序选项，到达添加项目页面 这个时候在前面设置页面的AppId就用到了。 如果项目目录中的文件是个空文件夹，会提示是否创建quick start项目。 选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的demo。 这个Demo拥有一个完整的小程序的大概框架。 1、框架 先看下一目录：…

本文讲述微信小程序websocket协议说明及使用示例分享，用示例的方式，让我们快速熟悉和用起来。 websocket是什么（简述）微信的websocket接口和html5的websocket基本一样，是http协议升级来的，做为一个新的socket在b/s上使用，它实现了浏览器与服务器全双工通信。因为这里是做小程序，所以就不对websocket的底层和协议做过多的说明了，只是稍微介绍一下。想了解详细的websocket可以参考如下： WebSocket 协议 WebSocket与Ajax 的选择 在WebSocket出来之前，实现即时通讯通常使用Ajax来实现，而Ajax是通过轮询的方式进行实时数据的获取，轮询就是在指定的时间间隔内，进行HTTP 请求来获取数据，而这种方式会产生一些弊端，一方面产生过多的HTTP请求，占用带宽，增大服务器的相应，浪费资源，另一方面，因为不是每一次请求都会有数据变化（就像聊天室），所以就会造成请求的利用率低。而WebSocket正好能够解决上面的弊端，WebSocket是客户端与服务器之前专门建立一条通道，请求也只请求一次，而且可以从同道中实时的获取服务器的数据，所以当应用到实时的应用上时，WebSocket是一个很不错的选择。 WebSocket协议名 WebSocket的链接不是以http或https开头的，而是以ws和wss开头的，这里需要注意一下。实例：实时显示交易信息 这里类似于实时查看股票信息，这里用到了图表插件wxchart。 wxchart插件地址： 基本说的差不多了，正式开始。添加stock页面： 将wxchart.js放入到pages/stock/中。修改stock.wxml： stock.js代码： // pages/stock/stock.js //加载插件 var wxCharts = require('wxcharts.js'); Page({   data: {},   onLoad: function (options) {     //建立连接     wx.connectSocket({       url: "ws://localhost:12345",     })     //连接成功     wx.onSocketOpen(function() {       wx.sendSocketMessage({…

这篇文章主要给大家介绍了微信小程序开发之toast提示插件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。 前言 3月28号微信更新了版本，showToast可以通过image参数修改默认icon了，最大时间也取消了。 以上两个更新实用很多，但icon还是无法去除。显示形式有点单一，无法自定义，可能后续更新会增加更多功能。下面来看看本文的详细内容： 下载文章下面的文件，放在根目录。 然后在app.js中引入js并添加到App中，如下： var wxToast = require('toast/toast.js') App({  wxToast ,  onLaunch: function () {} }) 登录后复制 在app.wxss中添加如下css： .wxToast_mask{width:100%;height:100%;position:fixed;left:0px;top:0px;z-index:10000;background:rgba(0,0,0,0);opacity:0;display:none}.wxToast_show{display:block}.wxToast_content{max-width:80%;min-width:90px;position:absolute;left:50%;top:20%;transform:translate3d(-50%,0,0);padding:15px;color:#fff;font-size:17px;text-align:center;border-radius:5px;background:rgba(0,0,0,.8)}.wxToast_img{width:55px;height:55px;display:block;margin:0 auto 8px auto} 登录后复制 接着在页面xxx.wxml中添加如下内容： <import></import><template></template> 登录后复制 最后在页面xxx.js中就可以调用了。 var app = getApp(); //wxToast挂载在app下面，所以必须先获取app Page({  toast: {  //调用  app.wxToast({   title : '加载中'  })  },  onLoad : function( ){}…

这篇文章主要介绍了微信小程序 开发中遇到问题总结的相关资料,需要的朋友可以参考下 微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的，在app.js执行ajax后，各分页加载app.js的全局数据时，无法按顺序加载。例： //app.js App({   ajax:function(){     let that = this;     wx.request({       url: 'https://a.com/url.php',       method: 'GET',       success: function(e){         that.data = 123;       }     })   }; }) //content.js let app = getApp() Page({   getData: function(){;     app.ajax();     console.log(app.data); //undefined   } }) 登录后复制 解决方法，使用Promise异步函数：…

这篇文章主要介绍了微信小程序picker组件简单用法,结合实例形式详细分析了picker组件的功能、使用方法与相关注意事项,需要的朋友可以参考下 本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考，具体如下： picker滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器（mode=selector），时间选择器（mode=time），日期选择器（mode=date），默认是普通选择器。 具体功能说明如下： 普通选择器：mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时，range有效 value Number 0 mode为selector时，是数字，表示选择了range中的第几个，从0开始。 bindchange EventHandle   value改变时触发change事件，event.detail= { value:value} 时间选择器：mode=time 属性名 类型 默认值 说明…

这篇文章主要介绍了微信小程序 获取相册照片实例详解的相关资料,需要的朋友可以参考下 微信小程序 获取相册照片 今天遇到微信小程序的用户头像设置功能,做笔记. 先上gif: 再上代码: 小demo,代码很简单. 1.index.wxml <!--index.wxml-->  <button>获取图片</button>  <image></image> 登录后复制 2.index.js //index.js  //获取应用实例  var app = getApp()  Page({   data: {    tempFilePaths: ''   },   onLoad: function () {   },   chooseimage: function () {    var _this = this;    wx.chooseImage({     count: 1, // 默认9     sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 …