小程序分享框-小程序系列之3框架（view&border）-小程序分享-即速应用

小程序分享框-小程序系列之3框架（view&border）-小程序分享

浏览量：1981 时间：2020-03-20 来源：摸索探寻

1.小程序框架
2.第一：框架简介
3.小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。框架提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。页面管理框架管理了整个小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。基础组件框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的微信小程序。丰富的API框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
第二：组件之视图容器view
微信公众号平台的链接：https://developers.weixin.qq.com/miniprogram/dev/component/view.html
微信小程序view：flex布局
微信小程序View支持两种布局方式：Block和Flex
所有View默认都是block
要使用flex布局的话需要显式的声明：
display:flex;下面就来介绍下微信小程序的Flex布局
先做一个简单的demo
viewclass="section"viewclass="section__title"flex-direction:row/viewviewclass="flex-wrp"style="flex-direction:row;"viewclass="flex-itembc_green"1/viewviewclass="flex-itembc_red"2/viewviewclass="flex-itembc_blue"3/view/view/viewviewclass="section"viewclass="section__title"flex-direction:column/viewviewclass="flex-wrp"style="height:300px;flex-direction:column;"viewclass="flex-itembc_green"1/viewviewclass="flex-itembc_red"2/viewviewclass="flex-itembc_blue"3/view/view/view
组件边框（border）
4.1.border-width：设置边框宽度：常用取值：medium：默认值，相当于3px。thin：1px。thick：5px。不可以为负值。
5.2.border-color:设置边框颜色。
6.3.border-top:设置顶部边框。border-top-width,border-top-style,border-top-color分别设置宽度，样式以及颜色
7.4.border-right：设置右边框。
8.5.border-bottom：设置底边框。
9.6.border-left：设置左边框。
10.7.border-radius：设置对象使用圆角边框。取值为数字或者百分比。