欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序基本标签与语法

程序员文章站 2022-04-12 08:09:11
小程序项目结构 、 基本标签的使用、 语法——数据绑定 、 语法——注册事件与消息提示框 、语法模块化、 方法中的this...

小程序

小程序项目结构

  • 静态页面的构成
    • 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>
  1. 属性绑定
	<!-- 属性绑定,{{}} -->
	<image src="{{imgUrl}}"></image>
  1. 条件渲染
    1. wx:ifwx:else是固定写法,不能改
    2. 条件满足就渲染,如果不满足不移除dom
	<!-- 条件判断{{}}
	如果条件满足就展示对应的dom -->
	<view wx:if="{{isHandsome}}">很帅		</view>
	<view wx:else>B</view>
  1. 列表渲染
    1. wx:for 是固定写法
    2. 默认的元素别名item,索引别名index
    3. wx:for-item可以指定元素别名
    4. 的值以两种形式提供
      1. 字符串,代表在 for 循环的 arrayitem 的某个 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 //是否显示遮罩
})

语法模块化

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

  • 作用:
    • 把一些公共的代码抽离为作为一个单独js
  • 使用:
    • 直接使用ES6的模块化
// 对外暴露
export default sayHello
  • 需要使用模块的js里面引入
// 引入模块
import sayHello from '../../utils/hello'

注意点:
import路径不支持绝对路径,所以写相对路径即可

方法中的this

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

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

本文地址:https://blog.csdn.net/weixin_44757417/article/details/109350358

相关标签: 微信小程序