小程序基础入门

1.小程序优势和劣势

优势：

• 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。

• 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。

• 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。

• 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

不足：

• 单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。

• 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。

• 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

2.小程序目录结构

• pages:

1. wxml: 编写小程序界面结构的地方

2. wxss: 编写小程序样式的地方

3. json：编写界面配置的地方

4. js：编写界面逻辑的地方

• utils: 编写工具类的地方

• app.js：创建程序实例的位置

• app.json: 编写全局配置地方

• app.wxss: 编写全局样式的地方

• project.config.json: 项目的配置文件

• sitemap.json：配置哪些网站可以被检索到

3.标签的使用

view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。

text标签也是我们开发中常用的，这个相当于Html中的span

image标签相当于我们Html中的img。

其他可以结合官方文档使用https://developers.weixin.qq.com/miniprogram/dev/component/

4.数据定义和引用

在界面对应的JS文件中的data属性上定义数据

通过{{}}的方式可以引用数据

 

5 .逻辑渲染

WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，使用 wx:elif 和 wx:else 来添加一个 else 块：

    除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM，hidden属性则是通过display属性设置为none来进行条件渲染。当flag为true的时候隐藏，为false的时候显示。

 6.列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

 

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。

 

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

wx:key 的值以两种形式提供：

1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2. 保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。