一、微信小程序文件结构
1. 微信小程序文件
|--pages
|--index 首页文件包
视图层 wxml wxss
逻辑层 js
数据传输层
配置层 json
|--logs 日志页面
|--util 第三方工具js(可删除)
|--app.js 项目全局入口文件
|--app.json 全局配置文件
|--app.wxss 全局样式文件
|--proiect.config.json 项目的配置文件，如appid
|--sitemap.json 微信索引配置文件2. app.json介绍
{
"pages": [ //页面文件路径,将文件路径放在最前面 微信打开就显示在首页
"pages/index/index",
"pages/expert/expert",
],
"window": { //全局默认窗口属性
"backgroundTextStyle": "light", //窗口下拉刷新的图标颜色
"navigationBarBackgroundColor": "#eb4450", //窗口导航栏背景颜色
"navigationBarTitleText": "小程序", //窗口导航栏标题
"navigationBarTextStyle": "white" //窗口导航栏字体颜色，仅支持黑色、白色
},
"tabBar": { //导航菜单
"color": "#78787c", //导航菜单字体颜色
"selectedColor": "#eb4450", //导航菜单选择后字体颜色
"backgroundColor": "#ffffff", //导航栏背景颜色
"position": "bottom",//导航栏位置
"borderStyle": "black", //导航栏边框颜色
"list": [ //导航列表，至少要包含两个导航页面
{
"pagePath": "pages/index/index", //页面路径，当点击图标时进行跳转到指定页面
"text": "探索", //导航标题
"iconPath": "icons/search.png", //导航图标
"selectedIconPath": "icons/search_red.png" //点击图标时的变化图片
},
{
"pagePath": "pages/expert/expert",
"text": "专家",
"iconPath": "icons/expert.png",
"selectedIconPath": "icons/expert_red.png"
},
{
"pagePath": "pages/share/share",
"text": "发布",
"iconPath": "icons/share.png",
"selectedIconPath": "icons/share_red.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my_red.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}二、数据绑定和数据渲染
1. 组件
|--text: 相当于html中 span 标签，行内元素，不会换行
|--selectable: 文本是否可选，可以进行文字复制
|--decode: 是否解码，可以对空格 回车进行编码
view: 相当于html中 div标签，块级元素，会换行2. 数据绑定
page{//数据都放在data中
data:{
num:2000
}
}
wxml文件显示
<text>{{num}}</text>3. 数据循环
(1)列表循环
wx:for="{{数组或对象}}"
wx:for-item="循环项的名称"
wx:for-index="循环向的索引"
wx:for-key="唯一的值" 用来提高列表的渲染性能
|--wx:key 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一值
|--wx:key = "*this" 表示你的数组是一个普通的数组，*this表示是循环项
|--notice:
|--当出现数组的嵌套的时候，要尤其注意wx:for-item wx:for-index 绑定的名称不要重名
|--默认情况下不写wx:for-item wx:for-index，小程序会把循环项的名称和索引的名称 item 和index 进行补充
|--当然在只有一层循环项时，wx:for-item wx:for-index可以省略
(2)对象循环
wx:for="{{对象}}"
wx:for-item="对象的值"
wx:for-index="对象的属性"
wx:for-key="唯一的值" 用来提高列表的渲染性能
|--notice:
|--循环对象时，最好把item和index的名称都进行修改4. block标签：用于循环，不想进行额外添加一层标签可以使用
|--占位符的标签
|--写代码时，可以看到这个标签的存在
|--页面渲染时，小程序会把它进行移除5. 条件渲染
|--wx:if="{{true/false}}"
|--wx:if wx:elif wx:else
|--hidden
|--在标签上直接添加hidden标签
|--hidden="{{true}}"
|--notice:
|--当标签不是频繁的切换显示，优先使用wx:if
直接将标签从页面结构上进行移除
|--当标签频繁的进行切换显示，优先使用hidden
通过添加样式的方式来切换显示6. 事件绑定
<input type="text" bindinput="handleInput"/>
|--需要给input标签绑定input事件
|--绑定关键字 bindinput
|--如何获取输入框的值
|--通过事件源对象来获取 e.detail.value
|--把输入框的值，赋值到data当中
|--不能直接使用
|--this.data.name = e.detail.name
|--this.num = e.detail.value
|--正确做法
|--this.setData({
num:e.detail.value
})
<button bindtap="handletap" data-operation="{{1}}"></button>
handletap(e){
//获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({
num:this.data.num = operation;
})
}
|--点击事件 bindtap
|--无法在小程序中的事件直接传参 bindtap="handletap"
|--通过自定义属性的方式来进行传参 data-operation="{{1}}"
|--事件源中获取自定义事件三、样式
NOTICE:小程序中不需要主动引入wxss文件1. 尺寸单位：rpx 自适应改变的像素单位
利用属性 calc(150rpx*100/375)
|--750和rpx之间不能有空格
|--运算符两边也不能有空格2. 外部样式引入
|--利用@import进行引入
|--只能使用相对路径3. swiper轮播图组件
<swiper>
<swiper-item>
<img src=""/>
</swiper-item>
</swiper>|--轮播图外层容器 swiper
|--轮播项 swiper-item
|--swiper存在默认样式
|--width 100% height 150rpx
|--swiper高度无法实现由内容撑开
|--先找出原图的宽度和高度，等比例给swiper设定宽度和高度
|-- swiper高度 = swiper宽度 * 原图高度/原图宽度4. navigator导航组件：类似于超链接标签
|--块级元素，默认会进行换行，可以直接加宽度和高度
|--url: 要跳转到的页面路径，使用绝对路径、相对路径均可
|--target: 要跳转到当前或者其他小程序的页面
|--self：默认值，自己小程序的页面
|--miniProgram：其他小程序的页面
|--open-type: 跳转方式
|--navigate
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
