微信小程序 —- 学习笔记

---

微信小程序简介

一种不需要下载安装即可使用的应用

实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用

状态模式-单向数据流;

微信小程序 官网

微信小程序开发文档

账号注册地址

---

使用笔记

查询 微信小程序账号 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
      })
    }
})

代码截图展示，如下：

---

遇到的问题

Cannot delete property 'WeixinJSBridge' of #<Window>

解决方法：尝试更换调试基础库