微信小程序学习笔记【一】

编辑器结构：

MINI——框架

1.pages【index——首页页面文件 loges——日志页面文件】

js——页面逻辑
wxml——页面结构
json ——页面配置
wxss ——页面样式表

2.utils 不必要，可自行删除
3.文件
app.js——小程序入口文件，同时也为全局文件，不可删除
app.json——全局配置文件，针对整个项目进行配置（可用page项目进行单页面配置）
app.wxss——全局样式文件，默认
project.config.json——“详情”页面，供手动配置
sitemap.json——配置该小程序或页面是否能在微信内被搜索到

字段：

1.全局配置【app.json】：全部页面的样式设置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

"pages": [
"pages/index/页面名1",
"pages/logs/页面名2"
……
],

和pages中的.js页面对应（*不能在页面名后加后缀名）
默认打开页面为pages字段第一行中的页面

"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},

定义所有页面各部分的外观，包括颜色、文字等

avigationBarBackgroundColor——标题栏背景色
navigationBarTitleText——标题栏文字内容
navigationBarTextStyle——标题栏文字颜色，只可为“black”或“white”
enablePullDownRefresh——全局下拉刷新，只可为“true”或“false”（*不加“”）
backgroundTextStyle——下拉刷新小圆点颜色，只可为“dark”或“light”
backgroundColor——下拉刷新小圆点所在区域背景色
详见： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

"tabBar": {
"list": [{
"pagePath": "pages中的地址",
"text": "名称",
"iconPath": "未选中图标路径",
"selectedIconPath": "选中图标路径"
}]
},

页面下方菜单设置，如淘宝app下方的“首页”“购物车”等

list（*至少包含两项）：
pagePath——跳转后页面
text——显示文字
添加图标：将选中和未选中图标放入文件夹，文件夹放入项目文件夹（文件夹和pages同层）。在iconPath等添加路径，“文件夹名/图片名.后缀名”
详见：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

2.页面配置【页面名.json】：单独页面的样式配置
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

3.sitemap 配置【sitemap.json】：小程序或页面是否能在微信内被搜索到
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

页面生命周期：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

模板语法：

1.数据绑定

data: {
msg:"hello"
},

在页面名.js中，将所有显示的数据放入date中
{{msg}}
在页面名.wxml中，用标签加双括号括住变量名进行渲染

data: {
person:{
age:36,
height:186,
weight:130,
name:"张三"
}
},

<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

*进行渲染时要选中具体属性

data: {
isChecked:true
},

<checkbox checked:=" {{isChecked}}">复选框</checkbox>

在标签的具体属性中使用（*使用布尔类型充当属性时，字符串和花括号之间不能有空格）

2.列表渲染

data: {
list:[
{
id:0,
name:"张三"
},
{
id:1,
name:"李四"
},
{
id: 3,
name: "王五"
}
]
},

<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
索引：{{index}}
值：{{item.name}}
</view>

wx:for="{{数组或对象}}" wx:for-item=“循环项名称” wx:for-index=“循环项索引” wx:key=“唯一值”
*item和index是默认循环项名称和索引项名称，多层循环嵌套时不能重名；只有一层循环时，wx:for-item=“item” wx:for-index=“index"可以省略
*如果是普通数组，则wx:key=”*this"，*this代表循环项
*以对象进行循环时，为避免混乱，建议将item换为value，index换为key

3.条件渲染

<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>

true和false可用数据绑定变为动态显示

<view wx:if="{{false}}">显示</view>
<view wx:elif="{{true}}">隐藏</view>

同if else语句，此时显示的是“隐藏”

<view wx:if="{{false}}">显示</view>
<view wx:elif="{{false}}">隐藏</view>
<view wx:else="{{true}}">都不符合</view>

此时显示的是“都不符合”

<view hidden="{{false}}">1</view>
<view hidden="{{true}}">2</view>
<view hidden>3</view>

也可用hidden渲染，此时只显示“1”（*hidden属性不要和display一起使用）

小程序中的事件绑定：

data: {
num:0
},
ainput(e){
console.log(e.detail.value);
},

.js中，将数据放入date，并声明自定义函数

{{num}} .wxml中，给input绑定input事件，绑定关键字为bindinput

data: {
num:0
},
ainput(e){
//console.log(e.detail.value);
this.setData({
num: e.detail.value
})
}

使num和e.detail.value值产生联系。把输入框的值赋值到data
*不能直接用this.data.num=e.detail.value和this.num=e.detail.value

<input type="text" bindinput="ainput"/>
<button bindtap="atap" data-operation="{{1}}">+</button>
<button bindtap="atap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

添加点击事件，绑定关键字为bindtap
*不能直接传参，而要通过自定义属性的方式来传递参数

data: {
num:0
},
ainput(e){
//console.log(e.detail.value);
this.setData({
num: e.detail.value
})
},
atap(e){
const operation = e.currentTarget.dataset.operation;
this.setData({
num: this.data.num+operation
})
}

在事件源中获取自定义属性

样式WXSS

和CSS语言类似，是用来规定样式的语言，但不需要主动引入样式文件

1.尺寸单位：rpx

view{
width:200rpx;
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
}

.wxss中，规定屏幕宽度为750rpx，1rpx=0.5px=1物理像素

2.样式导入

view{
font-size: 40px;
color: red;
}

新建文件夹以及wxss文件，写入样式

@import"../../aaaa/aaa.wxss";

打开目标wxss文件，用@import导入外联样式表（*只支持相对路径，最后记得加分号）

3.选择器
和CSS样式选择器类似，但不支持通配符*

• 点赞
• 收藏
• 分享
• 文章举报

百石 发布了3 篇原创文章 · 获赞 0 · 访问量 118 私信 关注