微信小程序一

微信小程序（一）

介绍

微信小程序可以说是网页的进阶版，同样的功能，它可以更加便利。微信小程序是需要下载的，但是微信审核要小程序代码 1M 一下，所以这个下载相当于不用下载。

小程序官网地址

• 微信小程序对比软件：

  • 小巧轻便，无需下载那么繁重
  • 一个版本，所有手机通用
  • 但是没有软件功能那么多

• 微信小程序对比网页：

  • 更加好传播
  • 访问时代码在本地，跳转其他页面时加载无需再次从云端访问，所以跟加快
  • 小程序有许多系统自带的空间，所以流畅度上是比网页更加好的
• 对于用户来说：

微信小程序更加便利，它小巧，功能强大，访问快捷，微信审核是需要 1M 以下的，所以打开加载也非常的快，在微信上就可以使用其他软件的功能无需下载多一个软件切换使用

• 对于开发者来说：

一个版本就可以所有型号的手机都适配，无需再重新编译个其他语言的版本。几乎是把前端取其精华，去其糟粕。

环境

• 编译器

使用微信小程序需要在官网下载个微信小程序的编译器，虽然也不一定要微信官方的，用 vscode 或 HbuilderX 也行，但是微信官方的对编译和预览方面比较方便。

官方下载地址

下载完之后直接安装使用即可

开始小程序

• 开始小程序需要一个小程序开发资格的账号，去官网注册一个即可小程序官网地址
• 注册完之后将找到其中的 AppID 记录一下，以后会用到
• 然后打开编译器，使用注册了微信小程序资格的微信账号登陆就会出现初始页面
• 选中小程序
• 如果只是学习的文件不需要上线的就可以使用测试 AppID

• 资料填完以后会出现个初始化页面，会出现预览框，代码框，和控制台

  • 代码框的侧边栏有几个文件pages,index,utils,logs,app.js,app.json,app.wxss,project.config.json,sitemap.json

    • ​ pages文件放的是所有文件，相当于根目录，app.js是全局脚本文件，app.wxss是全局样式文件，app.json是全局配置文件，里面包含一个 pages 属性和 window 属性，pages 属性是访问路径设置，window 属性是全局窗口配置，当然，优先级是本文件夹中的 json 文件为标准
    • index文件存放的是 index.wxml,index.wxss,index.js,index.json，前三个文件相当于前端网页的 html 文件，css 文件，js 文件，json 文件存放的是 index 文件夹内的文件配置，看到名字 index 可以明显知道这个是主页面，但是不是像前端一样把主页面文件设置为 index 就是主页面，而是在app.json 的 pages 对象内排列顺序，排第一位的就是主页面
    • logs文件存放的是自带写好的启动日志文件

注意：在 json 文件中不允许有注释，并且对象最后一个属性后面不能接逗号，在前端中对象最后一个是可以接逗号的，但小程序中不允许

快速创建一个文件

• 右键 pages 文件夹，也就是根目录，新建一个目录
• 在新建的目录中右键新建一个 page，这时候输入名字回车就会新建好所有配置文件，包含 wxml,wxss,js,json 文件

常用的语法

详情参考微信开发文档

wx:for：循环，类似于 vue 中的 v -for 的作用，在小程序中，js 文件也有个对象，里面有个 data 属性，作用与 vue 的一样，存放变量。在 wx:for 中，有两个类似于形参一样的东西，item,index，item就是代表循环对象的 value，index 就是循环对象的 key。

例子：<view wx:for="{{arr}}">{{item}}=>{{index}}</view>

注：在小程序中很多标签做作用和 h5 的一样，但做了语义化调整，像 view 就是 div

wx:for-item/key：循环数组或对象时代表其值 / 下标的形参指定别名

例子：<view wx:for-item="value" wx:for-index="key">{{value}}=>{{key}}</view>

wx:if：为标签添加条件

例子： show:10，<view wx:if="{{show == 10}}"> 数据是 {{show}}</view>

wx:elif: 此标签与 if 配套使用，中间不可以有其他标签，这个标签就是 else-if 的缩写，所以作用一目了然

wx:else: 此标签与 if/elif 配套使用，中间不可以有不是配套的标签穿插其中，这个标签作用很明显就是 else 的作用

wx:key：如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

注意：如果不使用 wx:key 的话会有个警告，Now you can provide attr `wx:key` for a `wx:for` to improve performance.意思是如果使用 wx:key 可以提升性能。因为如果不使用 wx:key 的话列表是删掉重新渲染，使用的话是保留状态重新排序，在效率上加 wx:key 会有所提升。