小程序基础整理一-CSDN博客

本文链接：https://blog.csdn.net/BookstoreSpirit/article/details/111474551

1、页面目录结构

小程序页面结构

1.1 全局配置文件 app.json

1.1.1、pages：页面路径

相关连接：pages属性官方详情.
在全局配置文件app.json中:在pages中添加需要增加的页面路径即可
"pages":[
   "pages/dome1/dome1", //新添加的文件
   "pages/index/index",
   "pages/logs/logs"
 ],
【在pages中，数组中第一个元素即为项目初始页面】

1.1.2、window：全局默认窗口表现

相关连接：window属性官方详情.
基础属性：

1.1.3、tabBar：底部tab栏
"tabBar": {
   "list":[{
   "pagePath": "",//路径
    "text": "",//标题
    "iconPath": "",//未选中时图标
    "selectIconPath": "",//选中时图标
  }]
},
【list数组元素最少两个，最多五个】
相关连接：tabBar属性官方详情.

1.1.4、sitemap：文件用于配置小程序及其页面是否允许被微信索引

相关连接：sitemap属性官方详情.

2、模板语法

2.1、数据绑定

类似于vue数据绑定
1、wxml中： <text>{{ msg }}</text>
js中：
Page({
   data: {
       msg: 'hello',
       num: 100
   }
})
2、自定义属性绑定
<text data-num="{{ num }}"></text>

2.2、运算

类似于vue 插值表达式运算

view>{{ 1 + 1 }}</view> // 2
view>{{ '1' + '1' }}</view> // 11
view>{{ 11 % 2 === 0 ? '偶数' : '奇数' }}</view> // 奇数

2.3、列表渲染

1、数组渲染：
vx:for={{ 数组 }}
vx:for-item=" 循环项名称 --> item " //若为单循环，可不写，系统默认
vx:for-index=" 循环项索引 --> index" //若为单循环，可不写，系统默认
vx:key=“唯一的值” ：用来提高列表渲染效率

数组含对象，vx:key的值为数组对象中的唯一值
普通数组，vx:key的值为’*this’

js:
Page({
   list: [{
       name: '张三',
       id: '160826'
   },{
       name: '李四',
       id: '160827'
   },{
       name: '王五,
       id: '160828'
   }]]
})
wxml:
<view vx:for="{{ list }}" vx:for-item="item" vx:for-index="index" vx:key="id">
	<text>姓名：{{ item.name }}</text>
    <text>学号：{{ item.id }}</text>
</view>>
2、对象渲染
vx:for={{ 对象 }}
vx:for-item=" 循环项名称 --> item " //若为单循环，可不写，系统默认
vx:for-index=" 循环项索引 --> index" //若为单循环，可不写，系统默认

【建议】:在循环对象的时候，建议讲默认的item和index值稍作修改:
vx:for-item=" value " vx:for-index=" key "

vx:key=“唯一的值” ：用来提高列表渲染效率

对象中，每一个属性名都是唯一的，可任选一个

3、条件渲染

vx:if：将标签从页面移除/添加
vx:if="{{ true/false }}" //条件1
vx:elif="{{ true/false }}" //条件2
vx:else //否则
hidden：将标签显示/隐藏
直接加上hidden属性，不显示该元素
表达式：hidden="{{ true/false }}"
【注】：hidden属性不和 display样式一起使用

使用场景：

当标签需要频繁切换的时候，优先使用 hidden
当标签较少切换的时候，优先使用 vx:if

2.4、绑定事件

1、监听输入框：bindinput="函数名"
<input type="text" bindinput="getInputCon" />
getInputCon(e) {
   this.setData({
	    变量名: e.detail.value
   })
}
2、点击事件：bindtap="函数名"
eg:点击按钮对变量进行加减运算
<button bindtap="handleTap">按钮</button>
【注意】

小程序中，这里的函数无法直接传参
通过自定义属性来区别：
<button bindtap="handleTap" data-operation="{{ 1 }}">按钮一</button>
<button bindtap="handleTap" data-operation="{{ -1 }}">按钮二</button>
handleTap(e) {
   const n = e.currentTarget.dataset.operation;
   this.setData({
	    变量名: this.data.变量名 + n
   })
}

3、样式wxss

3.1、尺寸单位 rpx

可以根据屏幕宽度自适应，规定屏幕宽度为 750rpx；
例如屏幕像素宽为375px,则 750rpx = 375px ==> 2rpx = 1px；
得公式：1px = 750rpx / 屏宽；
在wxss中，利用calc属性进行计算：
如屏宽375px，要求添加一个宽100px的容器，则：
width:calc(750rpx * 100 / 375)
**注意**：calc()能计算的计算表达式里，在加号(“+”)和减号(“-”)两边要留空格，而乘号(“”)和除号(“”)没有这个要求