微信小程序之初探(常见语法 VS vue)常见问题(点击不生效,数据绑定)
最近在调研微信小程序开发,对于一个前端小白来说,在各种框架都还用不熟的情况下,再来开发小程序确实还是不容易。
小程序出来之初,听过演讲,看过一点点儿视频,感觉和angular语法有点相似(PS:那是也是只了解一点点儿angular语法);
近两天开始尝试开发小程序,讲真,语法和angular和vue都很相似,小程序提供的语法现在还算全面,很多方法都有提供;
下面简述一下常用方法的使用:
一:数据绑定;
html
js 直接把数据写在data里面就行了,这样数据可以直接渲染到页面上,
那么问题来了,通常我们会数据都是动态加载的,在vue语法中,可以直接改变数据驱动页面数据改变,但是在小程序里面不能马上改变,
必须要使用
this.setData({
msg : "我改变了"
});
这样当数据改变是,页面上的数据才会相应跟着改变。
二:获取数据;
使用Vue 或者angular 时,我想要获取msg的值 ,直接 this.msg 就ok了,而小程序是这样的 this.data.msg ;
三 : 事件绑定:
这里就列举常用的时间绑定,用vue时,直接使用@click=“functionName” ,小程序 bindtap="functionName" ;
另外常见的还有input框的时间监听, <input bindinput="queryMsg" value="{{msg}}"/> bindinput=“functionName”;
input框发生改变时想干嘛就干嘛,input框的value值要用 e.detail.value 来获取;
四 : ajax请求VS小程序的wx.request({}) 详细用法可以上官网文档查看;
五 : 跳转window.location.href VS 小程序跳转 wx.navigateTo({url : "../query-detail/query-detail"}) !!!!注意,在小程序方法中不能跳转外链,只能在应用内部跳转; 跳转有五个方法
1、 wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack
可以返回到原页面。
2、wx.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。
3、wx.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
4、wx.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()
) 获取当前的页面栈,决定需要返回几层。
5、wx.reLaunch(OBJECT)
详细使用方法跳转到 官网 https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxnavigatetoobject
六 : 点击事件无效,页面数据渲染正常;
按钮无法点击 Do not have xx handler in current page
页面能正常显示,不过按钮事件不能触发 提示无法在当场页面找到触发事件
Do not have XX handler in current page: RR. Please make sure that XX handler has been defined in RR, or RR has been added into app.json
仔细检查,路径添加了,事件也添加了,依然错误,无法找到错误原因,最后尝试替换路径顺序,页面点击事件正常
以上方法 来自 http://www.jianshu.com/p/75a1c6a8a316
修改了app.json中路径顺序后还是不行;
我的解决方法是: 在html中写了点击事件的方法 比如
然后再 js中也写了注册了query这个函数,但是,还是报错,可能是因为修改了html中的query,然后我看js中也有query函数,一样的就没有管,结果还是无法点击,最后,我把html中的query负责一遍,再到js中把就是中的query覆盖一次,这样就可以了。很神奇,我也不知道是偶然还咋回事了。
微信小程序之初探(常见语法 VS vue)常见问题(点击不生效,数据绑定)的更多相关文章
- 微信小程序开发初探
一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所 ...
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
- 微信小程序调接口常见问题解决方法
第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...
- 微信小程序开发之常见BUG
1.wx:if 当前版本为1.3.0,正常使用 <view wx:if="{{length > 5}}"> 1 </view> <view wx ...
- 微信小程序之组件常见的问题
小程序自定义的组件: (1)组件的结构 自定义的组件和普通的页面定义没有什么区别,也包含了四个文件:xxx.wxml(组件的视图层),xxx.json,xxx.js,xxx.wxss 组件的xxx.w ...
- 微信小程序开发——文本框种输入手机号,点击获取验证码无反应的处理方法
异常描述: 如下图,输入手机号码之后,点击右侧的获取验证码,在开发工具是OK的,真机测试无反应: 页面编码跟H5差不多的,H5没出现这个问题,但是小程序就不一样了. 异常分析: 页面结构层面,为了方便 ...
- 微信小程序 - 视图层 | 基础语法
视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...
- 学习微信小程序之css16常见布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- k邻近算法(KNN)实例
一 k近邻算法原理 k近邻算法是一种基本分类和回归方法. 原理:K近邻算法,即是给定一个训练数据集,对新的输入实例,在训练数据集中找到与该实例最邻近的K个实例,这K个实例的多数属于某个类,就把该输入实 ...
- mysql_8.0.12环境配置
1. 官网下载mysql_8.0.12免安装包,解压到你存放的地方: 2. 配置环境变量(把bin的文件夹弄进系统path里面): 3. 在解压的根路径中,查看是否含有my.ini文件,没有就新建一个 ...
- 关于获取资源文件,Class.getResource和ClassLoader.getResource的区别
原文同步发表至个人博客[夜月归途] 原文链接:http://www.guitu18.com/se/java/2019-02-22/29.html 作者:夜月归途 出处:http://www.guitu ...
- MySQL 笔记整理(11) --怎么给字符串字段加索引?
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 11) --怎么给字符串字段加索引? 日常工作中的登录系统,你很可能会使 ...
- QT5.6.0 VS2013 Win764位系统QT环境搭建过程
QT5.6.0 VS2013 Win764位系统QT环境搭建过程 没用过QT自己跟同事要了安装包,按照同事指导方法操作安装部署开发环境结果遇到好多问题,错误网上搜遍了所有帖子也没有找到合适的解决方案. ...
- 【开源分享】微信营销系统(第三方微信平台)github 开源
升讯威微信营销系统(微信第三方平台) 在线体验:http://wxcm.eeipo.cn/开源地址GitHub:https://github.com/iccb1013/Sheng.WeixinCons ...
- DRDS分布式SQL引擎—执行计划介绍
摘要: 本文着重介绍 DRDS 执行计划中各个操作符的含义,以便用户通过查询计划了解 SQL 执行流程,从而有针对性的调优 SQL. DRDS分布式SQL引擎 — 执行计划介绍 前言 数据库系统中,执 ...
- 基础概念PHP-FPM、FastCGI和CGI
在搭建 LAMP/LNMP 服务器时,会经常遇到 PHP-FPM.FastCGI和CGI 这几个概念.如果对它们一知半解,很难搭建出高性能的服务器.接下来我们就以图形方式,解释这些概念之间的关系. 基 ...
- 一个字符带下滑线的EditText
效果样式: 这个比较特别的editText是公司的一个新的需求,我也是在网上找了一下,然后看到了一篇博客然后修改成自己需要的样式.这种一般的思路就是在onDraw()方法绘制editText的特别的样 ...
- Linux网络基本网络配置方法介绍
网络信息查看 设置网络地址: cat /etc/sysconfig/network-scripts/ifcfg-eth0 你将会看到: DEVICE=eth0BOOTPROTO=staticsHWAD ...