微信小程序学习一下
2020-07-06
主要还是玩css！！！ .js .json新建不能为空
开发工具的官方下载地址为：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。
AppID代表微信小程序的ID号，必须拥有微信小程序账号才可以申请这个ID号。读者可以到微信公众平台官网注册申请微信小程序账号，注册地址为：https://mp.weixin.qq.com/。
目录结构
小程序支持的选择器
//app.json文件主要是用于 注册页面 实为数组，可以注册多个页面
//其他的页面不能为空
//wxml中和html区别 view=div text=span image=img 组件=标签
.container 所有组件容器样式 使用Flex布局方式
.avater 设置图片的大小和位置
.motto 设置 Hello，橘子罐头 这段文字的样式
.journey-container 设置 hello world 的 外边框
.journey 设置圆角矩形内的文本样式
图片资源尽量不要放在目录中，因为小程序的大小不能超过1MB。应将资源都放在服务器上，让小程序通过网络加载！
本地资源在wxss中无法使用，应使用网络图片(推荐百度图片～
Flex布局：“也称弹性布局，主要作用在容器上”
使用display：flex将view变成一个弹性盒子。
flex-direction属性指定view内元素的排练方向： row column row-reverse column-reverse
row row-reverse 主轴为水平方向 row为从左向右
column column-reverse 主轴为垂直方向 column为自上而下
选择好主轴后，另一个方向的轴成为“交叉轴”
align-items属性定义子元素在“交叉轴”上如何对齐
align-items:center 将设置元素在水平方向上对齐方式为居中
小程序自适应单位 rpx
使用rpx可以使组件自适应屏幕的高度和宽度，但px不会
物理分辨率px；逻辑分辨率pt等。。。
iphone6的宽度为750个物理像素，1物理像素= 1rpx = 0.5px
border属性不需要使用rpx，但在屏幕大的显示会变粗，所以使用单位设置为px
使用px作为border-radius的单位
模拟器给出分辨率：375x667;Dpr:2;
意思是水平方向有375个逻辑像素点，竖直方向有667个逻辑像素点，每个逻辑像素点包含2个物理像素点
修改全局默认字体可以在app.wxss中添加：
text{
font-family: Arial, Helvetica, sans-serif;
}
不过页面默认先使用本页面wsxx下的字体
小程序外层还有个<page>容器，默认添加的
page代表整个页面的容器
通过设置page的颜色，设置背景颜色
不知道为什么不支持app.json中window对象
设置全局的小程序样式(giao)(原来是上一行结尾没加,号！！！引以为戒！！！）
只能在本页的 json中设置 上面黑色标题栏的背景色
在小程序中，几乎所有和数据相关的操作都只能使用数据绑定完成
swiper组件 banner轮播图 image 4种缩放模式、9种裁剪模式
swiper组件 包含多个 <swiper-item> 在里面插入其他组件即可
只设置 swiper组件的widget和height不行 swiper image也得设置
swiper 属性：indicator-dots、autoplay、interval
indicator-dots:boolean类型，用来指示是否显示面板上的指示点
autoplay：boolean类型，用来决定是否自动播放
interval：Number类型，用来设置切换时间，默认5000毫秒
circular：boolean设置是否循环滚动
vertical：设置指示点纵向还是横向，！！false会识别为字符串 需要{{false}}这样写
app.json
{
"pages":[
"pages/post/post",
"pages/welcome/welcome"
],
"window":{
"navigationBarBackgroundColor":"#ECC0A8"
}
}
post.wxml
<view >
<swiper indicator-dots="true" autoplay="true" interval="5000" circular="true" vertical="{{false}}">
<swiper-item>
<image src="/images/timg.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg3.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg4.jpg"></image>
</swiper-item>
</swiper>
<view class="post-container">
<view class="post-author-date">
<image src="/images/timg.jpg"></image>
<text>July 6 2020</text>
</view>
<text class="post-title">you are you are</text>
<image class="post-image" src="/images/timg1.jpg"></image>
<text class="post-content">you are my best friend</text>
<view class="post-like">
<image src="/images/timg2.jpg"></image>
<text>108</text>
<image src="/images/timg3.jpg"></image>
<text>20</text>
<image src="/images/timg4.jpg"></image>
<text>7</text>
</view>
</view>
</view>
post.wxss:
swiper{
width: 100%;
height: 600rpx;
}
swiper image{
width: 100%;
height: 600rpx;
}
page{
background-color: #ECC0A8;
}
.post-container{
flex-direction: column;
display: flex;
margin: 20rpx 0 40rpx;
background-color: #fff;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
padding-bottom: 5px;
}
.post-author-date{
margin: 10rpx 0 20rpx 10px;
display: flex;
flex-direction: row;
align-items: center;
}
.post-author-date image{
width: 60rpx;
height: 60rpx;
}
.post-author-date text{
margin-left: 20px;
}
.post-image{
width: 100%;
height: 340rpx;
margin-bottom: 15px;
}
.post-date{
font-size: 26rpx;
margin-bottom: 10px;
}
.post-title{
font-size: 16px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
margin-left: 10px;
}
.post-content{
color: #666;
font-size: 26rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
letter-spacing: 2rpx;
line-height: 40rpx;
}
.post-like{
display: flex;
flex-direction: row;
font-size: 13px;
line-height: 16px;
margin-left: 10px;
align-items: center;
}
.post-like image{
height: 16px;
width: 16px;
margin-right: 8px;
}
.post-like text{
margin-right: 20px;
}
text{
font-size: 24rpx;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #666;
}
当前成果和代码树：
今天因为下雨没有跑步，英语也没背，希望这行字自己看不到～
2020-07-08 这块准备放慢学习，因为本来就不难，再加上要学习的东西很多，阶段性更新～最后完成会发布源码～
image组件的4种缩放模式与9种裁剪模式
针对原始图片高度是未知和不固定的情况！比如动态网页获取的图片(接受不完美也是编程的一种常态～)
只需给image添加mode属性值
4种缩放模式：
scaleToFill ：不保持横纵比缩放图片，使图片拉伸至铺满image元素
aspectFit ：保持横纵比缩放图片，使图片的长边完全能显示出来。可完整显示图片
aspectFill ：保持横纵比缩放图片，只保证短边能完全显示出来
widthFix ：宽度不变，高度自动变化，保持原图宽高不变
9种裁剪模式：
top ：不缩放图片，只显示图片的顶部区域
bottom ：不缩放图片，只显示图片的底部区域
center ：不缩放图片，只显示图片的中间区域
left ：不缩放图片，只显示图片的左边区域
right ：不缩放图片，只显示图片的右边区域
top left ：不缩放图片，只显示图片的左上区域
top right ：不缩放图片，只显示图片的右上区域
bottom left ：不缩放图片，只显示图片的左下区域
bottom right ：不缩放图片，只显示图片的右下区域
更新会造成页面的重新渲染。onReady仅用来监听“第一次渲染”完成
数据目前全写在html文件中，是“硬编码” 应将数据移植到post.js中
不同与AngularJS双向数据绑定，小程序只实现了单向的数据绑定。 逻辑层->渲染层
数据绑定有两种：
1.初始化数据绑定。将数据写在Page方法的data对象下
2.setData方法做数据绑定，可以理解为数据变更。会引起页面的Rerender(重新渲染)
{{}} 双大括号绑定法
当页面onShow后，会收到一个通知Notify，随后逻辑层将data对象以json形式发送到View视图层 Send Initial Data
视图层接收初始化数据后，开始渲染并显示初始化数据 First Render
如果 数据绑定是作用在组件的属性中，所以要在{{}}的两边加上"" 支持object:{} 和 object:{ array:[10] }
开发IDE下方的AppData可以查看数据情况 Tree切换成Code 可以以json方式查看
Page.对象名.setData <== 数据更新
setData的参数接受一个对象，以key和value的形式将this.data中的key对应的值设置为value
Page({
//data页面原始数据
data:{
m_image1:"/images/timg1.jpg",
object:{
array:[10],
date:"July 28 2019",
},
},
//页面从创建到卸载的5个步骤 先显示 后渲染
onLoad:function(options){
//页面初始化 options 为页面跳转所带来的参数 只调用一次
console.log("onLoad");
this.setData({
m_image1:"/images/timg.jpg",
"object.array[0]":66,
"object.date":"giao",
})
},
onShow:function(){
//页面显示 每次打开都会调用
console.log("onShow");
},
onReady:function(){
//页面渲染完成 监听页面初次渲染完成，一个页面只调用一次，代表页面准备完成，可以和试图层进行交互
console.log("onReady");
},
onHide:function(){
//页面隐藏
console.log("onHide");
},
onUnload:function(){
//页面关闭
console.log("onUnload");
},
onPullDownRefresh(){
//用户下拉动作的事件处理函数
},
onReachBottom(){
//用户上拉触底事件处理函数
},
onShareAppMessage(){
//用户点击右上角分享
},
})
浙公网安备 33010602011771号