微信小程序 — 学习笔记
微信小程序简介
一种不需要下载安装即可使用的应用
实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用
状态模式-单向数据流;
使用笔记
查询 微信小程序账号 AppID
项目结构
实例demo
Hello World !
代码展示,如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
str: 'Hello World !'
},
onLoad: function () {
}
})
页面结构代码,如下:
<!--index.wxml-->
<view class="container">
<!-- 数据绑定 {{}} 绑定内容 -->
{{ str }}
</view>
效果展示,如下:
input 的
bindinput
事件触发对象 event 详情
在微信小程序中实现数据双向绑定
页面结构代码,如下:
<!--index.wxml-->
<view class="container">
<view class="form-item">
<input type="text" value="{{ myForm.username }}" bindinput="changeUsername" data-name="username" placeholder="请输入您的姓名" focus="{{ true }}"/>
</view>
模拟数据双向绑定 --- {{ myForm.username }}
</view>
逻辑代码,js 如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
myForm: {
username: 'yk-ddm'
}
},
onLoad: function() {},
changeUsername: function(e) {
var that = this,
currentTarget = e.currentTarget,
dataset = currentTarget.dataset,
key = dataset.name,
value = e.detail.value,
myForm = "myForm." + key
that.setData({
[myForm]: value
})
}
})
代码截图展示,如下:
todo
遇到的问题
Cannot delete property 'WeixinJSBridge' of #<Window>
解决方法:尝试更换调试基础库