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

  • 相关阅读:
    Oracle SQL语句大全—查看表空间
    Class to disable copy and assign constructor
    在moss上自己总结了点小经验。。高手可以飘过 转贴
    在MOSS中直接嵌入ASP.NET Page zt
    Project Web Access 2007自定义FORM验证登录实现 zt
    SharePoint Portal Server 2003 中的单一登录 zt
    vs2008 开发 MOSS 顺序工作流
    VS2008开发MOSS工作流几个需要注意的地方
    向MOSS页面中添加服务器端代码的另外一种方式 zt
    状态机工作流的 SpecialPermissions
  • 原文地址:https://www.cnblogs.com/DivHao/p/7122511.html
Copyright © 2011-2022 走看看