微信小程序之初探(常见语法 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覆盖一次,这样就可以了。很神奇,我也不知道是偶然还咋回事了。

时间: 2024-10-20 10:10:29

微信小程序之初探(常见语法 VS vue)常见问题(点击不生效,数据绑定)的相关文章

微信小程序开发初探

一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所有围绕微信的创造比如公众号都应该发挥其应有的价值. (3)用完即走的高效服务→这一点就厉害了word天,微信要打造一个以微信为中心的生态链,不以绑定用户为目标.比如生活中有一些不太常用的app,我们可能一年也使用不了几次,但是有时候就需要用到,微信就想要提供这样一个平台,让你可以在微信中使用这中所谓

学习微信小程序之css16常见布局

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css常见布局</title> <style> *{ padding: 0;margin: 0; } .header,.nav,.main,.footer{ background-color: silver; border: 1px solid

微信小程序-两个input叠加,多次点击字体变粗或闪动

问题描述: 当两个input叠加,多次点击input框, placeholder 字体变粗或input框闪动.如图: 代码: <!-- 最上层input-1 --> <input placeholder='请输入昵称,手机号,客户名称' ></input> <!-- 底层input-2 点击后会遮盖上层input-1 --> <input placeholder='请输入昵称,手机号,客户名称' ></input> 效果示意图: 解决

[转]浅谈微信小程序

本文转自:http://www.cnblogs.com/liziyou/p/6340159.html 微信小程序 1.什么是小程序 小程序是指微信公众号平台小程序,小程序可以在微信内被便捷的获取和转播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是平行的体系. 2.小程序获取方式 一.线下扫码 小程序最基础的获取,是二维码,可以通过微信扫一扫二维码的方式进入小程序. 二.微信搜索 在微信客户端的搜索功能,输入小程序名称获取小程序 三.公众号关联 同一个的小程序和公众号可以进行关联

新手入门:微信小程序--从入门到精通宝典

<ignore_js_op> 作为新手入门的宝典,我们整理了本论坛各种有价值的内容,并按循序渐进的方式呈现给大家.大家可以按顺序一篇一篇的攻克本帖中的内容,也可以作为字典,跳转至关注的内容去学习.希望大家在这里能快速成长,成为微信小程序开发的顶尖高手. 本帖的内容结构如下:一:小程序之张小龙全面阐述及思维导图:二:微信小程序官方地址三:如何学习微信小程序四:新手入门系列教程集合五:公司开发前必读六:个人开发前必读 一:小程序之张小龙全面阐述及思维导图: 小程序之张小龙全面阐述:于1月9日上线(

微信小程序探究

前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来学习,首先分析一下微信小程序是什么,听起来比较高大上,说实话原来我确实挺疑惑,到底这一套是什么开发机制,native?hybrid?纯h5?看网上各种教程上来就说api说语法,感觉不先理清楚是什么的问题就去搬api过来纯粹是耍流氓. 一.微信小程序是什么: 言归正传,微信小程序的本质是什么?个人理解

微信小程序总结

1.把微信做成一个工具,而不是平台 2.合理性,不合理的去掉. 3.微信白皮书,让用户节省时间而不是去消耗时间. 微信小程序 1.可以运行程序的程序(操作系统) 2.未来程序无处不在,随时可以访问 3.微信小程序是一种不需要下载安装即可使用的应用.他实现了触手可及的梦想,用户扫一扫过搜一下即可体验应用.用户应用太多耗费太多内存,应用将无处不在,触手可及,用户不用担心安装卸载. 4.智能眼镜:所见即所得,看到一个的东西,可以得到它背后的信息!手机时代需要触摸. 5.触手可及:手机作为媒介,传递周围

微信小程序如何像vue一样在动态绑定类名

微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别,需要的朋友可以参考下 小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共

官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Android,开发工具等等),操作系统信息(系统版本),以及可以让他人重现的信息,最好能够提供重现 demo. 对于提供信息过少的问题,会直接关闭,请提供完整信息以后重新打开问题.另外,对于如何做某某功能,可否做某某功能的问题,会直接关闭. 微信小程序常见FAQ(17.8.21-17.8.27) Q:1.5