小程序

这篇文章主要给大家总结了关于微信小程序开发中的各种疑问解答，文中将在微信小程序开发中可能遇到的问题都进行了整理和解答，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。 前言 最近总结一篇微信小程序解答，作为小程序填坑人深有体会这里的变化，小程序刚发布消息的时候我就说了一个观点，只要小程序提供的组件或API丰富，稳定，兼容性好，才能实现小程序快速开发的理念，先如今还有很多组件的兼容不理想，有一些还在的优化中，因基于小程序这个平台开发限制很大，只能坐等中。。。如果想用第三方库来实现，小程序明文规定不支持第三方库的做法，这样做最终小程序审核环节百分百的不通过。 1.scroll-view 在 iOS 上存在 bug 在使用这个组件开发页面的时候，因自带滚动效果，Y 轴滑动在下拉触发 iOS 原生的橡皮筋效果时，scroll-view 出现不能滑动的 bug，在 Android 系统下无橡皮筋效果则没有这个 bug。现在最新版本0.11.122100如果还存在那就是下个版本会处理的。 2.微信 6.3.31 版本中 input 的 focus 无效 在小程序更新日志记录中以解决 2016-12-22 更新日志 1.F…

这篇文章主要为大家详细介绍了微信小程序日期时间选择器的使用方法，自定义精确到分秒或时段，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 本文实例为大家分享了精确到秒的微信小程序日期时间选择器，供大家参考，具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现！ WXML <view>  <view>时间选择器（选择时分）</view>  <picker>  <view>   午饭时间: {{time}}   </view>  </picker></view><view>  <view>日期选择器（选择年月日）</view>  <picker>  <view>   国庆出游: {{date}}  </view>  </picker></view><view>  <view>日期时间选择器（精确到秒）</view>  <picker>  <view>   选择日期时间: {{dateTimeArray[0][dateTime[0]]}}-{{dateTimeArray[1][dateTime[1]]}}-{{dateTimeArray[2][dateTime[2]]}} {{dateTimeArray[3][dateTime[3]]}}:{{dateTimeArray[4][dateTime[4]]}}:{{dateTimeArray[5][dateTime[5]]}}  </view>  </picker></view><view>  <view>日期时间选择器（精确到分）</view>  <picker>  <view>…

本篇文章给大家带来的内容是关于小程序中生命周期的解析（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 首先,我们来思考:当我们点击屏幕或者做滑动屏幕的类似的触发事件时,界面为什么会做出相应的变化呢? 原因是 :  整个小程序应用有2个线程. 一个线程做视图渲染. 一个线程做逻辑处理. 这样你差不多应该清楚了 : wxml和wxss文件主要做视图展示,而js文件主要是做响应事件的逻辑处理,分工明确! 其次,我们再来分析:我们使用小程序会发现有很多的页面,那么谁来管理这些页面呢?页面和整个程序之间又是个什么样儿的关系呢? [x] 一个app,有app和pages构成,有着不同的生命周期 app 一个程序启动后,执行onLaunch—>onShow App({   onLaunch: function () {   },   onShow: function (options) {   },   onHide: function () {   },   onError: function (msg) {   } }) 登录后复制 pages 一个程序启动后,执行onLaunch—>onShow后,接着加载首页;加载首页onLoad—>onShow—>onReady…

微信小程序 支付功能开发错误总结 微信小程序支付终于踩完坑了，发现里面坑挺大的，现在发个贴，希望以后入坑的同学可以看一下 ： https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=2 业务流程在这里大家看文档的时候可以看到。第一个坑，获取用户的openid，参数一定要拼在url连接上，否则会报{“errcode”:40013,”errmsg”:”invalid appid, hints: [ req_id: iil1ba0504ns86 ]”}错误  onLoad: function () {   var that = this   wx.login({    success: function (res) {     if (res.code) {      //发起网络请求      wx.request({       url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxaacf22345345cfc7162fe3&amp;secret=83ebd41c3e6f34a49b3a34578063434548ff3f71&amp;js_code=' + res.code + '&amp;grant_type=authorization_code',       method: "POST",       success: function (res) {        that.setData({         openid: res.data.openid        })       }      })     } else {…

这篇文章主要介绍了 微信小程序点击控件修改样式实例详解的相关资料,需要的朋友可以参考下 微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式，如下： 微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。 第一步：在wxss中定义被点击和未被点击的样式，如下： .service_selection .is_checked{   border: 1px solid #FE0002 ;   color: #FE0002 ;   background: #fff;  }  .service_selection .normal{   border: none;   color: #333;   background: #F0F1EC;  } 登录后复制 第二步：在js文件中的data中设置一个flag,叫他isChecked，默认isChecked==false。如下： data: {    isChecked: false   } 登录后复制 第三步：在wxml文件中绑定点击事件， <view></view> 登录后复制 登录后复制 在js文件中实现这个方法，并另他点击后设置isChecked==true。如下： serviceSelection(){ …

“小程序”破解ide + demo：https://github.com/gavinkwoe/weapp-ide-crack.git资源汇总：https://github.com/aufree/awesome-wechat-weapp官方简易教程·mina：http://wxopen.notedown.cn/hello小程序 – 非官方：http://www.helloxcx.com微信应用号开发教程：https://my.oschina.net/wwnick/blog/750055 资源来自网络，拿走不谢！ 简单搞了一下，吼吼~： js：业务处理 //index.js //获取应用实例 var app = getApp() Page({  data: {   motto: 'Hello World',   userInfo: {name:'汗青',         desc:"前端的春天来了！  前端要烂大街了！！",      avatarUrl:"http://img2.3lian.com/2014/gif/10/9/25.jpg"}  },  //事件处理函数  bindViewTap: function() {   wx.navigateTo({    url: '../logs/logs'   })  },  onLoad: function () {   console.log('onLoad')   var that = this…

这篇文章主要介绍了微信小程序使用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( ){}…