微信小程序:JS 交互逻辑

一、JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候,我们希望把界面上 msg 显示成 "Hello World",于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})

此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。

在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称,最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。

微信小程序:JS 交互逻辑的更多相关文章

  1. .Net Webapi SignalR与微信小程序的交互

    .Net Webapi SignalR与微信小程序的交互 一.SignalR与Webapi 1.SignalR的安装: Signalr与跨域仅需要安装两个开源库 Microsoft.Owin.Cors ...

  2. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  3. 微信小程序——3、逻辑js文件

    逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...

  4. “微信小程序” js部分注解

    1.小程序不提供获取dom的操作,而是让我们直接将事件绑定写入到组件内.区别在于bind不阻止冒泡,而catch阻止冒泡. <view id="tapTest" bindta ...

  5. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  6. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  7. 微信小程序API交互的自定义封装

    目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档, ...

  8. 微信小程序学习笔记(1)-微信小程序样式设置逻辑

    1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...

  9. 微信小程序--后台交互/wx.request({})方法/渲染页面方法 解析

    小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } ...

  10. 微信小程序 js逻辑

    }) 页面 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. data 页面的初始数据,data 将会以 JSON 的形式由逻辑层 ...

随机推荐

  1. jQuery之ajaxForm提交表单

      1.jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器.   2.jquery form插件是基于jQuery开发的一套能够利用ajax技术提 ...

  2. iOS - UITableView滚动到指定的cell并且选中

    UITableView //项目中遇到的 - (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)a ...

  3. Sencha Cmd创建Ext JS示例项目

    Sencha提供了免费的Cmd工具,可以用来创建Ext JS项目并提供了一些便利的功能. Sencha也在官方文档中提供了一个示例来演示如何创建一个Sample Login App. 本文就介绍一下这 ...

  4. sql数据库中如何根据身份证号判断性别

    身份证号有15位和18位的..在sql中该如何判断? I_sex ,) ,) then '男' else '女' END

  5. OLE工具套件分析OFFICE宏恶意样本

    零.绪论:OLE工具套件的介绍 OLE工具套件是一款针对OFFICE文档开发的具有强大分析功能一组工具集.这里主要介绍基于Python2.7的OLEtools的安装和使用. (1)Python版本需求 ...

  6. angularJS中的ng-repeat指令!

    ng-repeat 指令: ng-repeat 指令用来遍历一个数组重复创建当前元素: <ul ng-app="myApp" ng-controller="myAp ...

  7. 通过JS模拟select表单,达到美化效果[demo]

    .m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...

  8. postgresql----LIKE和SIMILAR TO

    LIKE和SIMILAR TO都支持模糊查询,另外SIMILAR TO还支持正则表达式查询.模糊查询中有两个重要的符号:下划线'_'匹配任意单个字符,百分号'%'匹配任意多个字符,可以是0个,如果想匹 ...

  9. nginx_log介绍和分割

    nginx access_log日志简介 log_format 日志格式 1.语法:log_format name(格式名字) 格式样式(即想要得到什么样的日志内容)示例: log_format ma ...

  10. CSU 1808 地铁 (Dijkstra)

    Description Bobo 居住在大城市 ICPCCamp. ICPCCamp 有 n 个地铁站,用 1,2,-,n 编号. m 段双向的地铁线路连接 n 个地铁站,其中第 i 段地铁属于 ci ...