微信小程序入门

微信小程序的优势和劣势

优势：容易推广，小程序有众多入口，例如附近的小程序、小程序二维码、分享、发现等五十多个入口。使用便捷。体验良好。成本低。

劣势：单个包大小限制为2M，不能开发大型应用，采用分包最大目前是20M。多出首微信限制，不能直接分享到朋友圈，不允许涉及到积分，或者虚拟交易。

微信开发文档点这里：微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/

项目的目录结构

pages：页面

wxml ：编写小程序界面结构的地方

wxss ：编写小程序样式的地方

json ：编写页面配置的地方

js ：编写页面逻辑的地方

utils ：编写工具类的地方

app.js ：创建程序实例的地方

app.json ：编写全局配置的地方

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

project.config.json ：项目的配置文件

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

配置tabbar

在app.json中进行配置，需要注意的是tabbar的图标不能是线上的地址，需要提前准备好放到项目里，一般这些静态资源可以放在assets文件夹下。这些图标可以从阿里巴巴矢量库中下载iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

小程序直接提供了配置tabbar的方法，详细点这里：null微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

WXML的常用组件

在小程序中，标签都有一些功能，叫他组件，小程序给我们提供了很多，如下几个常用的组件

view标签相当于html里的div

text标签相当于html中的span

image标签相当于html中的img

数据绑定：在界面对应的JS文件中的data属性上定义数据，然后再页面中用{{}}包裹起来

里面也可以进行一些计算

逻辑渲染

wx:if = “ ”判断元素是否显示，可搭配wx:elif  和 wx:else 来使用

直接在标签内写hidden = “”  为true 是隐藏，为false是显示

循环遍历

wx:for  = {{直接写数组}}  wx:key = " 直接写id等 "

默认带item和index  如果是嵌套循环 该item和index的话 需要在便签内写上

wx:for-index = " index2 "   wx:for-item = " item2 "