微信小程序总结-01

学习微信小程序

1.小程序配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages:

在pages中添加路径，小程序会自动为你常见文件夹，以及页面的wxml ，js，json文件。

window：

window可以设置一下窗口配置，例如窗口头的背景颜色，整体颜色，标题等。

tabBar：

tabBar可以tab栏，默认是在底部，可以通过position：top配到顶部。

2.WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

简单来说就是在html的基础上添加了一下功能。

html的div变成了view。html很多的span，b，i等标签都无法被解析，只用text来代替，样式都让wxss来呈现

数据绑定

wxml:

<view> {{msg}} </view>

js:

Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

wxml:

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

js:

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

wxml:

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

js:

Page({
  data: {
    view: 'MINA'
  }
})

3.js

点击事件：bindtap

wxml:

<button bindtap="ButtonAction">
    
</button>

js:

Page({
  data: {
    view: 'MINA'
  },
  ButtonAction: function(e){
      consolt.log("点击事件")
  }
})

获取输入框内容事件:bindinput

wxml:

<input bindinput="getText"></input>

js:

Page({
  data: {
    view: 'MINA'
  },
 	getText:function(e){
    const text= e.detail.value;
  }
})

事件传参:data-value

wxml:

<button data-text="参数" bindtap="ButtonAction">
</button>

js:

Page({
  data: {
    view: 'MINA'
  },
  ButtonAction: function(e){
     const args = e.currentTarget.dataset.text
  }
})