开发小程序的话 首先要了解里面的每个文件的作用
- 小程序没有DOM对象，一切基于组件化
- 小程序的四个重要的文件*.js*.wxml ---> view结构 ----> html*.wxss ---> view样式 -----> css*. json ----> view 数据 -----> json文件
- 储备知识理解事件机制理解组件化理解数据绑定Flex布局移动端适配方案
- 贴心小建议
学习vue后开发小程序的感觉会爽到飞起
1 什么是flex布局？
1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
2) 任何一个容器都可以指定为Flex布局。
3) display: ‘flex’
2 flex属性
1) flex-direction:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
3 小程序适配方案
Iphon6： 1rpx = 1物理像素 = 0.5px
微信官方提供的换算方式：
- 以iPhone6的物理像素个数为标准: 750;
- 1rpx = 目标设备宽度 / 750 * px;
- 注意此时底层已经做了viewport适配的处理，即实现了理想视口
前面是简单介绍 然后就可创建一个小程序
进去之后是一个白板 需要自己创建 里面的文件
大概需要的文件只有这么多 如果需要新建页面就可在pages下建文件夹
首先需要画一个简单的页面就要一步一步来
app.js里面写一个
App({//注册小程序
});
表示是一个小程序
然后在app.json里设置需要配置的页面以及相关样式
{ "pages":[ "pages/index/index" ], "window":{ "navigationBarBackgroundColor": "#8ED145", "navigationBarTitleText": "阿圆网络", "navigationBarTextStyle": "black" }}里面引用了一个页面index 我们就建立一个index文件夹 点击pages右键一个 创建的时候自动建了下面的小文件
然后我们就来画一个界面
首先是她的index.wxml里画一个基本模板 所有需要调整的组件都给一个class 然后在wxcc里需要引用
hello 安好 开启小程序之旅 index.wxcc页面 对前面这个页面里的组件进行样式的调试
/* pages/index/index.wxss *//*里面设置class那边的样式 */page{ /*最外面有一层page设置整个高度 和背景 */ height: 100%; background: #8ED145;}.indexContext{ /*flex布局 */display: flex;/*纵向布局 */flex-direction: column;/*布局居中 */align-items: center;}.avatar{ width: 200rpx; height: 200rpx; /*圆角图形取一半 */ border-radius: 100rpx; margin: 100rpx;}.userName{ margin: 100rpx; font-size: 40rpx; /*字体变粗 */ font-weight: bold; color: bisque;}.text{ /*设置这个class边框等 里面内容另外设置 */ width: 250rpx; height: 80rpx; /*设置里面的字体 */ font-size: 30rpx; /*实现边框长度颜色 */ border: 1rpx solid brown; border-radius: 10rpx; /*字体居中 */ text-align: center; line-height: 80rpx;}最后的效果如图 一个简单的页面就这样调整完成。