微信小程序开发学习笔记

@(官方文档)[https://developers.weixin.qq.com/miniprogram/dev/component/]

1. 初始微信小程序

https://developers.weixin.qq.com/miniprogram/dev/framework/

2. 小程序的基本目录

4种基本配置文件:wxml, wxss, js, json

3. rpx响应式单位与flex布局

rpx响应式

小程序中使用rpx可以根据屏幕大小自动响应/自适应大小
width:200rpx;height:200rpx
文字大小也可以用rpx
font-size: 32rpx;
经验:rpx数值一般是px的2倍

文字居中

使用：text-align: center;容器内字体
和line-height: 80rpx;字体高度=容器高度
很适合做文字居中

flex布局居中

flex布局，居中；容器声明
display: flex;
flex-direction: row; //按行排列
align-items: center;

Swiper组件使用技巧(轮播图/滑块视图容器)

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

4. 阅读列表与setData数据绑定

引入外部组件--安装,编译LinUI

使用npm安装组件,如lin-ui 版本号0.8.7
cmd进入工程根目录:npm i lin-ui@0.8.7
然后在微信开发者工具中,菜单栏--工具--构建npm
在哪个页面要使用哪个组件,可以在那个页面的json引入组件,如果多个页面需要使用也可以在app.json中引入:

  "usingComponents": {
    "l-icon":"/miniprogram_npm/lin-ui/icon/index"
  }

在wxml中写js表达式

属性中要设置false要加双花括号? "{{false}}"
双花括号里面的内容false将被当做JavaScript表达式而不是字符串
根据以上原理true也是传入的字符串,最好加上{{true}}规范
只写属性名不赋数据默认是true

数据绑定原理--存在双向数据绑定

数据绑定--使用Mustache语法

注意双花括号里面是表达式!!!如果定义一个函数就不是表达式了

<view>{{massage}}</view>

Page({
	data:{
	message:'Hello MINA!'
	}
})

5. 条件渲染、列表渲染与小程序事件

条件渲染语法

wx:if=""	//空是false,任意值是true,显示/隐藏该标签

使用if--else

<image wx:if="{{flag}}" src="/images/avatar/3.png"></image>
<text wx:else>Nov 18 2020</text>

列表渲染