这篇博客介绍了微信小程序的基础知识，包括小程序的定义、发展历程、优势和不足。内容涵盖小程序的配置、WXML、WXSS和JS的使用，以及事件处理、数据渲染等核心概念。适合初学者了解和学习微信小程序开发。
目录
今日总结
1、小程序的介绍
①小程序是什么
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
任何一个普通的开发者，经过简单的学习和练习后，都可以轻松地完成一个小程序的开发和发布。
②小程序的发展史
移动网页在拍摄、录音、语音识别、二维码等方面能难使用这些功能
---> 之后微信提供了JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API，实现了这些功能，但是，这仅仅是可以实现，但并不好用
---> 随着微信的推广，越来越多的人来使用微信，基于这一点，微信研发了微信小程序
③小程序的优势和不足
优势：
- 微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
- 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
- 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
- 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。
不足：
- 单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
- 需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
- 处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。
④如何学习微信小程序
巧妙使用官方文档
2、项目的目录结构
3、常用配置
①配置导航窗口
②配置页面
一般情况下我们会给每个页面创建一个文件夹，所以我们首先在pages下创建一个文件夹。
小程序直接给我们提供了创建页面的功能，右键这个文件夹，点击创建新建Page即可直接生成页面所需的文件。
生成文件之后，所有的页面都需要在app.json的pages属性中声明之后，才可以访问，小程序会默认先加载pages属性中第一个页面。如果开发过程如果我们需要调试别的页面，我们可以添加一个新的编译模式。
③配置tabBar
tabbar中的list属性至少有2个元素，最多有5个
在移动端经常会涉及到tabbar的使用，小程序直接给我们提供了配置tabbar的方法。
这里需要注意的是，tabbar的图标不能是线上的地址，需要提前准备好放到项目里，一般情况下，这些静态资源可以放在assets文件夹下。这些图标大家可以从阿里矢量图标库中进行下载 iconfont-阿里巴巴矢量图标库。
在app.json文件中，与’window‘同级（下面只是示例）
"tabBar": {
"selectedColor": "#ff0000",
"list": [
{
"pagePath": "pages/newsList/newsList",
"text": "首页",
"iconPath": "./assets/index.png",
"selectedIconPath": "./assets/index1.png"
},
{
"pagePath": "pages/talk/talk",
"text": "聊天室",
"iconPath": "./assets/speak.png",
"selectedIconPath": "./assets/speak1.png"
},
{
"pagePath": "pages/mvList/mvList",
"text": "MV",
"iconPath": "./assets/MV.png",
"selectedIconPath": "./assets/MV1.png"
},
{
"pagePath": "pages/mine/mine",
"text": "个人中心",
"iconPath": "./assets/me.png",
"selectedIconPath": "./assets/me1.png"
}
]
},
详情请看官方文档
4、WXML
①组件（标签）的使用
常见的组件（标签）：
<view>：块状元素
<text>：行内元素
<image>：块状元素
<button>：块状元素
<input>：块状元素，没有边框
<rich-text>：利用<rich-text nodes='{ {变量名}}'></rich-text>来解析富文本
<scroll-view>：要设置固定高度，子元素炒熟父元素高度时会自动出现滚动条，结合一些属性来看，使用起来比较方便
……
因为这些时微信小程序已经封装好的组件，会有一些不同于html的属性，具体情况具体组件还是要看官方文档
②数据绑定
数据定义
在界面对应的JS文件中的data属性上进行定义数据
Page({
/**
* 页面的初始数据
*/
data: {
mvList: [],
offset: 0,
limit: 10,
isLoading: false
},
...
})引用数据
{ {}}
除了引用数据之外，这里还可以进行一些计算，最终显示的结果是计算之后得到的结果。但是不可以调用函数
小程序中任何需要获取数据的地方都需要用{ {}},包括标签内的属性。
③逻辑渲染
wx:if wx:else wx:elif
hidden
与vue中 v-if 与 v-show 相似，就不过多阐述了
④列表渲染
wx:for="{ {数组}}"
最低0.47元/天 解锁文章
扫一扫
3385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
