微信小程序:JS 交互逻辑
微信小程序: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 交互逻辑的更多相关文章
- .Net Webapi SignalR与微信小程序的交互
.Net Webapi SignalR与微信小程序的交互 一.SignalR与Webapi 1.SignalR的安装: Signalr与跨域仅需要安装两个开源库 Microsoft.Owin.Cors ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- 微信小程序——3、逻辑js文件
逻辑层js文件 微信小程序前端进行了层次划分,分为逻辑层和视图层.逻辑层实现对数据的加工和处理.与HTML页面相似,逻辑层使用JavaScript编写.逻辑层将数据处理后发送至视图层,同时接受视图层的 ...
- “微信小程序” js部分注解
1.小程序不提供获取dom的操作,而是让我们直接将事件绑定写入到组件内.区别在于bind不阻止冒泡,而catch阻止冒泡. <view id="tapTest" bindta ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- 微信小程序室内地图导航开发-微信小程序JS加载esmap地图
一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...
- 微信小程序API交互的自定义封装
目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档, ...
- 微信小程序学习笔记(1)-微信小程序样式设置逻辑
1.微信小程序的样式设置统一在每一页的.wxss的样式文件中,所有的样式设置代码统一写入这个文件中: 2.样式主要是通过.wxml里面控件的“class”属性来调用,此处调用会有几个细节要注意: 1) ...
- 微信小程序--后台交互/wx.request({})方法/渲染页面方法 解析
小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } ...
- 微信小程序 js逻辑
}) 页面 Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. data 页面的初始数据,data 将会以 JSON 的形式由逻辑层 ...
随机推荐
- jQuery的无new构建
正常面向对象的写法: var cJquery = function(){ //构造函数体 }; cJquery.prototype = { name : function(alert("ch ...
- ubuntu 信使(iptux) 创建桌面快捷方式
$ sudo ln -s /usr/bin/iptux ~/桌面/iptux.ln
- Android 测量调用方法耗时的方法
private long mDrawnRealTime; 起点:mDrawnRealTime = SystemClock.elapsedRealtime(); 终点: long delay = Sys ...
- 真机远程页面调试工具spy-debugger 3.x:集成weinre+AnyProxy,页面调试+抓包。调试生产HTTPS页面。
.页面调试+抓包 2.操作简单 3.支持HTTPS. 4.spy-debugger内部集成了weinre.node-mitmproxy.AnyProxy. 5.自动忽略原生App发起的https请求, ...
- FlashDevelop导入swc库
项目不是AS项目,而是基于FlashIDE. 一 将SWC放入项目lib文件夹下 二 选择lib文件夹,右键,选择添加到库 三 FlashIDE中选择 文件-ActionScript设置 四 选择浏 ...
- Navicat 创建 Mysql 函数
1.点击新建函数 2.写函数,保存为v1 3.调用 SELECT id,v1(id) from 表
- eclipse 安装Subversion1.82(SVN)插件
Eclipse下SVN插件的安装,可以选择在线安装和离线安装两种方式: 2.(可选①)使用本地安装包安装插件 --填写插件名(可随意取名) --插件来源地址(①安装包,②使用网址) →Archie→选 ...
- linux的~和/的区别
转自:https://zhidao.baidu.com/question/166486946.html /是目录层的分隔.表示符.只有一个/表明是root,/etc/表明是根目录下面的etc目录(当然 ...
- SpringMVC实现简单应用
我们都知道,servlet代码一般来说只能在一个servlet中做判断去实现一个servlet响应多个请求, 但是springMVC的话还是比较方便的,主要有两种方式去实现一个controller里能 ...
- windows dos 常用命令行
有关某个命令的详细信息,请键入 HELP 命令名 dir (directory) :列出当前目录下的文件以及文件夹 md (make directory): 创建目录 rd (remove direc ...