微信小程序

目录

1.微信小程序是什么？

2.项目下的文件和文件夹的作用如下：

3.常用标签

4 单位rem和rpx

5模板语法

6页面底部选项卡

7 导航与页面间传参

8组件开发

9 权限列表

10 云环境

11云函数

```12 云数据库

13 小程序读取微信信息

---

1.微信小程序是什么？

    是一个基于微信app为开发和运行环境的一个小性软件

# 小程序项目结构

2.项目下的文件和文件夹的作用如下：

components: 小程序的自定义组件

images: 图片文件夹

pages: 存放页面文件的文件夹

    index: 页面文件夹

        index.js: 页面的js代码

        index.json: 页面的配置

        index.wxml: html模板文件

        index.wxss: 页面的样式文件

app.js: 微信小程序的程序入口(程序入口：开始执行代码的地方)

app.json: 小程序应用程序的全局配置文件

app.wxss: 小程序的全局样式(.wxss文件是小程序的样式文件)

envList.js: 小程序云环境列表

project.config.json: 小程序项目的配置

sitemap.json: 小程序路由配置

3.常用标签

<!-- page 标签相当于 html 中的 body -->

<page></page>

<!-- view 标签相当于 html 中的 div -->

<view></view>

<!-- text 相当于 html 中的 span -->

<text></text>

<!-- image 相当于 html 中的 img -->

<image></image>

<!-- block 是一个自身不会显示的标签 -->

<block></block>

4 单位rem和rpx

## rem

rem 是 html 中的长度单位，代表相对根节点(html)上字体的大小

## rpx

rpx 是 微信wxml中的长度单位，iphone5 机器上1个像素长度等于1rpx

5模板语法

参考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

模板语法是微信规定的一套书写wxml的语法

## 插值

作用：用于将变量值插入页面

语法：

```wxml

<!-- name 变量，定义在 js 文件的 data 中 -->

{ {name}}

> 注意：插值运算的花括号中{ {}}，填写的内容其实是js表达式

## 循环渲染

作用：可以将数组数据循环显示到页面中

语法：

```wxml

<!-- wx: 开头的写在标签头部的东西 称为指令 -->

<!-- array: 来自js data中的数组 -->

<!-- 使用 wx:for 一定要加上 wx:key，wx:key的值是array对象中的不可重复的属性 -->

<view wx:for="{ {array}}" wx:key="id">

    <!-- index: 是 wx:for 中隐式声明的变量，代表循环遍历array时的当前索引 -->

    <!-- item: 是 wx:for 中隐式声明的变量，代表循环遍历