微信小程序开发----基础语法篇

01.打开别人的项目

1. 选择代码目录
   如果这个项目是自己本机上自己创建过的，就会提示你直接打开

 如果这个项目是他人创建过的，这里可能需要更新小程序ID

 02.在js中定义数据

Page({
  data: {
    isOpen: true,
    message: 'hello world!'
  }
})

在模块中获取使用数据

小程序中使用 { {}} 实现数据与模板的绑定

1. 内容绑定：<view>{ { 属性名 }}</view>
2. 属性绑定: <input value="{ {属性名}}" />

例如：

<!-- 数据绑定 -->
<view class="binding">
  <!-- 开关组件 -->
  <switch checked="{
  {isOpen}}"/>
  <view class="message">{
  {message}}</view>
</view>

{ {}} 内写的是表达式

<view>{
  { 1 + 1 }}</view>
<view>{
  { 1 ? '男' : '女'}}</view>
<view>{
  { false || '你好'}}</view>

提问如下有什么区别？

<view>
  <switch checked="false" />
</view>

<!-- 如下才是正确表示布尔值 false 的方法 -->
<view>
  <switch checked="{
  {false}}" />
</view>

03.简易双向绑定

什么是双向绑定？

1. 小程序中提供了 model:value="{ {数据名}}" 语法来实现双向的数据绑定
2. 目前只能用在 input 和 textarea 组件中

 例如：.wxml

<!-- 数据绑定 -->
<view class="binding">
  <!-- 开关组件 -->
  <switch checked="{
  {message==='hello'}}" />
  <!-- 双向数据绑定 -->
  <view>
    输入框：<input type="text" model:value="{
  {message}}" />
  </view>
  <view>输入的内容是：</view>
  <view class="message">{
  {message}}</view>
</view>

.js

Page({
  data: {
    message: ''
  }
})