小程序学习笔记01（零基础玩转小程序）--全局配置page、window、tabbar字段，单个页面配置，wxml的一般用法、字符替换、运算、列表渲染、对象循环

1、全局配置page字段

在app.json文件中进行配置
设置json文件的pages对象的值

"pages":[
    "pages/index/index",
    "pages/demo01/demo01",
    "pages/img/img",
    "pages/mine/mine",
    "pages/search/search",
    "pages/logs/logs"
  ],

2、全局配置window字段

配置导航栏颜色，下拉刷新等

"window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我的测试应用",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  },

3、全局配置tabbar字段

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/homeG.png",
      "selectedIconPath": "images/homeR.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "images/imgG.png",
      "selectedIconPath": "images/imgR.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "个人",
      "iconPath": "images/personG.png",
      "selectedIconPath": "images/personR.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "搜索",
      "iconPath": "images/seekG.png",
      "selectedIconPath": "images/seekR.png"
    }
    ]
  },

4、全局配置其他几个字段

以下几个字段是和pages同级的

"color": "#0094ff",
"selectedColor": "#ff9400",
"position": "top"

5、对自定义的单个页面进行配置

{
  "usingComponents": {
  }, 
  "navigationBarBackgroundColor": "#27aae9",
  "navigationBarTitleText": "个人页面"

}

6、wxml的一般用法

<text>标签不换行
<view>标签会换行

可以直接使用vscode打开微信小程序项目，同时需要安装一个微信小程序助手插件

7、使用字符替换

mine.js文件

//Page Object
Page({
  data: {
    mymsg:"这是一个有意思的msg",
    number:10000,
    isGirl:false,
    isCheck:true,
    person:{
      age:74,
      height:145,
      weight:200,
      name:"zhangsan"
    }
  })

mine.wxml文件

<!--pages/mine/mine.wxml-->
<text>pages/mine/mine.wxml</text><br/>
<view>{{mymsg}}</view>
<view>{{number}}</view>
<view>是否是伪娘{{isGirl}}</view>
<view>{{person.name}}</view>
<!--在标签的属性中使用-->
<view data-num="{{person.age}}">自定义属性</view>
<!--使用bool类型充当属性(字符串和花括号之间一定不要放空格)-->
<view>
  <checkbox checked="{{isCheck}}"></checkbox>
</view>

效果

8、运算

<text>pages/demo1/demo1.wxml</text>
<view>{{1+1}}</view>
<view>{{"1"+"1"}}</view>
<view>{{10%2==0?'偶数':'奇数'}}</view>

9、列表渲染

列表循环：
方法1： wx:for=’{{数组或者数组对象}}’ wx:for-item=“循环项名称” wx：for-index="循环项的名称"
demo1.js文件

  Page({

  /**
   * 页面的初始数据
   */
  data: {
  	person:{
      age:56,
      height:156,
      weight:200,
      name:"大富翁"
    },
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      },

    ]

  },
）

<view>
  <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
    索引：{{index}}--值：{{item.name}}
  </view>

</view>

方法2： wx:key="唯一的值"用来提高列表渲染的性能

wx：key绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一属性
使用：wx：key="*this"表示你的数组是一个普通的数组，*this表示是循环项

当出现数组嵌套循环的时候，尤其要注意，以下绑定的名称不要重名
wx:for-item=“item” wx:for-index=“index”
只有一层循环的时候（wx:for-item=“item” wx:for-index=“index”）可以省略

  <view>
  <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引：{{index}}--值：{{item.name}}
  </view>

</view>

上面代码等效于

<view>
  <view wx:for="{{list}}" wx:key="id">
    索引：{{index}}--值：{{item.name}}
  </view>

</view>

10、对象循环

对象循环：
wx:for="{{数组或对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”
demo1.js文件

  Page({

  /**
   * 页面的初始数据
   */
  data: {
  	person:{
      age:56,
      height:156,
      weight:200,
      name:"大富翁"
    },
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      },

    ]

  },
）

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

</view>

循环对象时，最好把item和index的名称都修改一下
wx:for-item=“value”
wx:for-index=“key”
也可以是用wx：key，提供一个唯一属性名，以避免警告

<view>
  <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">
    对象属性：{{key}} -- 对象的值：{{value}}
  </view>

</view>

11.1、一些补充 --导出方法

支持command-js语法规范
支持module.exports导出方法，不支持exports.say={ }语法

module.exports={
	say:say
}

11.2、一些补充 --mustache的使用

mustache语法可以用在
1、innerHTML（类似）
2、元素的属性上
不能用在标签名和属性名上

可以直接使用子里面连和简单的逻辑运算符，三元表达式等

11.3、一些补充 --catchtap阻止冒泡

wxml文件

<view class="container">
  <view bindtap="redtap" style="width:200px; height:200px; background-color:red">
    <view catchtap="greentap" style="width:100px; height:100px; background-color:green"></view>

  </view>
</view>

js文件

 // 事件处理函数
  redtap() {
   console.log('red');
  },
  greentap() {
    console.log('green');
   },

11.4、一些补充 --e.target

e.target是点击的元素
e.target.datset是指元素是哪个所有以data-开头的属性，通过data-来拿参数
this是事件处理函数指向的页面对象

11.5、一些补充 --通过事件与e.detail.value实现双向数据绑定

小程序界面和逻辑层数据通过数据扭转（没有双向数据绑定）实现双星绑定

• 创建事件
• 通过setData设置数据并通知界面发生数据变化。
• 通过e.detail.value传递数值

js文件

// index.js
// 获取应用实例
const app = getApp()
Page({
  data: {
   message:'initial',

  },
  // 事件处理函数
  inputhandle(e){
    this.setData({
      message:e.detail.value
    })
  }
})

wxml文件

<!--index.wxml-->
<view class="container">
  here is somthing about news
  
  <input value="{{message}}" bindinput="inputhandle"/>
  <text>{{message}}</text>
</view>

11.6、实现双向数据绑定案例

xml文件

<!--index.wxml-->
<view class="container">
  
  <input value="{{username}}" bindinput="usernameChangeHandle" type="text" placeholder="请输入用户名" name="username" style="border:1px solid gray"/>
  <input value="{{password}}" bindinput="passwordChangeHandle" type='password' placeholder="请输入密码" name="password" style="border:1px solid gray"/>
  <button type="primary" bindtap="loginHandle">登录</button>
  <button type="default">注册</button>
</view>

js文件

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
   username:'admin',
   password:'123'

  },
  // 事件处理函数
  loginHandle(e){
    //TODO：完成逻辑
    console.log(this.data);
  },
  //用户名输入框发生改变
  usernameChangeHandle(e){
    this.setData({
      username:e.detail.value
    })
  },
  //用户名输入框发生改变
  passwordChangeHandle(e){
    this.setData({
      password:e.detail.value
    })
},        
  
})

11.7、优化实现双向数据绑定案例

wxml文件

<!--index.wxml-->
<view class="container">
  
  <input value="{{username}}" bindinput="inputChangeHandle" type="text" placeholder="请输入用户名" data-prop='username' style="border:1px solid gray"/>
  <input value="{{password}}" bindinput="inputChangeHandle" type='password' placeholder="请输入密码" data-prop='password' style="border:1px solid gray"/>
  <button type="primary" bindtap="loginHandle">登录</button>
  <button type="default">注册</button>
</view>

js文件

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
   username:'admin',
   password:'123'

  },
  // 事件处理函数
  loginHandle(e){
    //TODO：完成逻辑
    console.log(this.data);
  },
  //用户名输入框发生改变
  inputChangeHandle(e){
    let prop=e.target.dataset['prop'];
    let changed={
    }
    changed[prop]=e.detail.value;
    this.setData(changed)
  },
    
  
})