在微信小程序中基础的模板语法与事件绑定笔记

微信小程序笔记

开发之前要注意

下载微信开发工具与VS CODE

微信开发工具下载地址

下载完记得好好阅读开发文档，这是一个好习惯

Vs Code下载地址

• 一连串下一步安装好之后，随后在Vs code中 Ctrl + Shift + P 键入config,选择Configure Diseplay Language ， 在左侧选择中文即可将Vs code设置成中文版。再进行Ctrl + Shift + X 操作，打开扩展内下载miniapp插件与微信小程序开发插件。

2020年11月19日星期四，第47周

• 在app.json内编辑全局文件

• 简单的关键字介绍：

  enablePullDownRefresh：是否开启全局刷新 Boolean类型
  
  backgroundtextstyle:下拉时 刷新的小圆点的字体颜色 dark
  
  backgroundcolor:下拉刷新区域的背景颜色
  

• 在tabBar内编辑文件

"tabBar"：[{
    "pagePath"："页面路径",
    "text":"页面标题",
    "iconPath":："文件夹/未选中的图标路径.png",
    "selectedIconPath":"文件夹/选中的图标路径.png"
}]

”报错tabbar至少包含两项"则多在tabBar内写几个下方导航栏按钮。

！ 页面配置可以控制导航栏的外观 ！

• sitemap

微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中

• 基础的模板语法

//书写在.WXML文件内
<text>1</text>文本标签                 //相当于web中的span标签 行内元素 不会换行
<view>2</view>                        //相当于web中的div标签 块级元素 会换行
<checkbox checked="{{}}"></checkbox>  //checkbox 以前的复选框标签
<view>{{msg}}</view>                  // 1.字符串
<view>{{num}}</view>                  //2.数字类型
<view>是否是人类:{{isman}}</view>       //3.布尔类型
<view>{{person.age}}</view>
<view>{{person.sex}}</view>
<view>{{person.name}}</view>           //4.object类型

<view data-num="{{num}}">自定义属性</view>      //5.在标签的属性中使用

                                              //6.使用布尔类型充当属性 checked
                                              //字符串和花括号之间一定不要存在空格，否则会导致识别失败！！
                                              //以下写法就是错误的示范
                                              //<checkbox checked="    {{ischecked}}"></checkbox>
     <view>
    <checkbox checked="{{true}}"> </checkbox> 
     </view>

<!--
7.运算=>表达式
  1.可以在花括号中加入表达式--"语句"
  2.表达式：指的是一些简单运算、运算、数字运算、字符串、拼接、逻辑运算
    1.数字的加减
    2.字符串拼接
    3.三元表达式
  3.语句
   1.复杂的代码段
    1.if else
    2.switch
    3.do while..
    4.for...

8 列表循环
  1 wx:for="{{数组或者对象}}" wx.for-item="循环项的名称" wx:for-index="循环项的索引"
  2 wx:key="唯一的值"用来提高列表渲染的性能
   1 wx:key 绑定一个普通字符串的时候 那么这个字符串名称 肯定是循环数组中的 对象的 唯一属性
   2 wx:key = "*this" 就表示你的数组 是一个普通的数组 *this表示是循环想
   [1,2,3,4,5,]
   ["1","2","asd"]
  3 嵌套循环 尤其要注意:! for-item for-index 不要重名
  4 默认情况下 我们不写wx:for-item="item" wx:for-index="index"小程序也会把循环想的名称和索引的名称默认为item和index
  只有一层循环的话 (wx:for-item="item" wx:for-index="index") 可以省略
9 对象循环
 1 wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="循环项的索引"
 2 循环对象的时候 最好把 item和index的名称都修改一下
   wx:for-item="value" wx:for-index="key" 
           
            -->
      <view>{{1+1}}</view>

      <view>{{'1' + '1'}}</view>            
 
      <view>{{ 10%2 === 0 ? '偶数' : '奇数'}}</view>   //做判断

<!--
10 block
 1 占位符的标签
 2 写代码的时候 可以看到这标签存在
 3 页面渲染 小程序会把它移除掉
 -->
 
<view>
  <block
wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key= "id"
class="my_list" >
索引：{{index}}
--
值：{{item.name}}
</block>
</view>

<view>
  <view>对象循环</view>
  <view wx:for="{{person}}">
    属性：{{index}}
    --
    属性：{{item}}
  </view>
</view>

<!-- 
11 条件渲染
  1 wx：if="{{true/false}}"
   1 if , else ,if else
    wx:if
    wx:elis
    wx:else
  2 hidden
   1在标签上直接加入属性 hidden  
   2 hidden="{{}}"
  3 什么场景下 决定用哪个标签
   1 当标签不是频繁的切换显示 优先使用 wx:if
   直接把标签 从页面结构移除掉
   2 当标签频繁的切换显示的时候 优先使用 hidden
   通过添加样式的方式来切换显示
-->
<view>
  <view>条件渲染</view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3 </view>

  <view> ------------------------</view>
  <view hidden>hidden1</view>
  <view hidden="{{false}}">hidden2</view>

  <view>----------000-----------</view>
  <view wx:if="{{false}}">wx:if</view>
  <view hidden >hidden</view>
</view>

//书写在.js内与WXML的对应数据
data: {
    msg:"aa",
    num:10000,
    isMan:true,
    person: {
      age:23,
      sex:"男",
      name:"chb"
    },
    isChecked:false,
  list:[
    {
      id:0,
      name:"chb"
    },
    {
      id:1,
      name:"hxy"
    },
    {
      id:2,
      name:"giaogiaogiao"
    }
  ]
  },

事件绑定笔记

接下来请新建一个.wxml 与 .js文件

直接上笔记 复习与练习才可以掌握

<!--.wxml-->
    <!--pages/demo/demo.wxml-->

<!-- 
1.需要给input标签绑定 input事件
    绑定关键字 bindinput
2.如何获取输入框的值
    通过事件源对象来获取
3.把输入框的值 赋值到data中
    不能直接按照如下操作
       1.this.data.num = e.detail.value
       2.this.num = e.detail.value 
    正确写法如下
    this.setData({
        num:e.detail.value 
        )}
4.需要加入一个点击事件
    1 bindtap
    2 无法在小程序的事件中 直接传参
    3 需要通过自定义属性的方式来传递参数
    4 事件源中获取 自定义属性    })
 -->
<input type="text" bindinput ="handleInput"/>
<view>{{num}}</view>

<button bindtap="handletap" data-operation="{{100}}">GIAO</button>
<button bindtap="handletap" data-operation="{{-50}}">奥里给</button>

<!--.js文件-->
// pages/demo/demo.js
Page({
   /**
    * 页面的初始数据
    */
   data: {
      num:0
   },
   //输入框的input时间的执行逻辑
   handleInput(e){
      //console.log("😊")//1.需要给input标签绑定 input事件
                      // 绑定关键字 bindinput
      //console.log(e) // 2.如何获取输入框的值
                     //通过事件源对象来获取
      //console.log(e.detail.value)
      this.setData({
         num:e.detail.value 
         })
},
   //加减按钮的事件
   handletap(e){
         //console.log(e);                   //获取自定义属性 operation
         const operation = e.currentTarget.dataset.operation;
         this.setData({
            num: this.data.num + operation
            })
      }            
   })

以上配合视频观看，只需要几分钟就会掌握的更好

• operation只是自己定义的一个名， 可以把operation替换成其他的。 就能实现一个简单的加减法按钮，着重突出的是事件绑定事件
• const是ES6语法

微信开发者工具内可以使用的快捷键：

Ctrl+S：保存文件
Ctrl+【， Ctrl+】：代码行缩进
Ctrl+Shift+【， Ctrl+Shift+】：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行

Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退