小程序基本标签与语法

小程序

小程序项目结构

• 静态页面的构成

  • HTML ：结构
  • css :样式
  • js :行为

• 小程序

  

• 页面全部存放在pages, 而且pages目录只能存放页面

  • 页面包括4个文件， pages/页面名/页面名.js(wxss,json,wxml)
    • 4个文件的文件名必须一致
    • 4个文件
      • .js 页面逻辑
      • .json 页面配置
      • .wxml 页面结构
      • .wxss 页面样式

• app.js 是小程序入口文件，先忽略掉

• app.json

  • pages 配置的数组，是有序的。第一个就是模拟器显示的页面

{
	// 所有的页面路径都应该配置在这个数组里面，如果没有配置，如果跳转
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
    //全局窗口样样式
  "window":{
    "backgroundTextStyle":"light",
      //导航栏方案的背景色
    "navigationBarBackgroundColor": "#fff",
      //导航栏的文案
    "navigationBarTitleText": "等你回家",
            //导航栏方案的前景色
    "navigationBarTextStyle":"black"
  }
}

• app.wxss 全局样式

基本标签的使用

组成程序的页面的并不是HTML标签，而是小程序的组件

• text ：显示文本的

  • 相当于是 span 标签，是行内元素

• view 包裹作用

  • 相当于是 div

• image 就是显示图片

• 默认的高度和宽度

• 开发时，需要设置高度和宽度

• button 按钮

  • size:mini :表示小的按钮

<button>默认的按钮</button>
<button size="mini">小按钮</button>

语法——数据绑定

• { {}} ：数据绑定使用 Mustache 语法（双大括号）将变量包起来

1. 文本渲染：

	<!-- 文本渲染，使用{{}} -->
	<text>{{msg}}</text>

2. 属性绑定

	<!-- 属性绑定,{{}} -->
	<image src="{{imgUrl}}"></image>

3. 条件渲染
   1. wx:if 和 wx:else 是固定写法，不能改
   2. 条件满足就渲染，如果不满足不移除 dom

	<!-- 条件判断{{}}
	如果条件满足就展示对应的dom -->
	<view wx:if="{{isHandsome}}">很帅		</view>
	<view wx:else>丑B</view>

4. 列表渲染
   1. wx:for 是固定写法
   2. 默认的元素别名 item ，索引别名 index
   3. wx:for-item 可以指定元素别名
   4. ？ 的值以两种形式提供
      1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
      2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

	<!-- 遍历,{{}}
	默认的元素别名item,默认的索引别名index -->
	<view wx:for="{{movieList}}" wx:key="*this">{{item}}--{{index}}</view>

• 注意点
• 可以在微信开发者工具，调试器可以看到当前页面的 data 属性，也可以改

• { {}} 可以写表达式

	<view class="box {{isRed?'red':''}}"></view>

语法——注册事件与消息提示框

• 注册事件

  • 在结构中注册事件

  • 事件名有很多，但是最基本是 tap 事件

    PC 端使用 click 事件，移动端用 top 事件

	<button bind事件名="事件处理方法">点我呀</button>

• 事件处理方法声明在和 data 平级

	Page({
	事件处理方法(){
        
    	}
	})

• 消息提示框

wx.showToast({
    title: '点疼我了',  //提示的文案
    // icon:'loading'
    icon:'none', //提示框图标
    duration:3000,//提示时长
    mask:true //是否显示遮罩
})

语法模块化

小程序中也支持模块化的概念:

• 作用：

  • 把一些公共的代码抽离为作为一个单独 js

• 使用：

  • 直接使用ES6的模块化

• 传送门：

• 使用方法

  • 在模块js中暴露方法 属性 或者 对象

// 对外暴露
export default sayHello

• 需要使用模块的js里面引入

// 引入模块
import sayHello from '../../utils/hello'

注意点：

import 路径 不支持绝对路径 ，所以写相对路径即可

方法中的this

小程序中的 this 指向就的当前小程序 页面实例 ，可以通过 this 取得对象上的属性与方法

• 方法访问 data 属性 this.data.属性名
• 方法访问方法 this.方法名
• 改变 data 属性 this.setData({属性名:值})