开始学学小程序的基础,个人笔记部分,无参考意义
part1网址
小程序开发入门
根目录下的文件是全局配置,但会被具体的页面配置覆盖
新建小程序页面
- 通过app.json新建页面
教程中给的代码是
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
预览结果为
但如果我给的代码是
"pages/index/index",
"pages/home/home",
"pages/logs/logs"
模拟器里仍然是
所以说app.json
里的pages
配置是有先后顺序的,排在前面的先展示
新建页面就是新建page
配置tabBar配置项
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#13227a",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "image/icon-tab1.png",
"selectedIconPath": "image/icon-tab1-active.png",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"iconPath": "image/icon-tab2.png",
"selectedIconPath": "image/icon-tab2-active.png",
"text": "活动"
},
{
"pagePath": "pages/partner/partner",
"iconPath": "image/icon-tab3.png",
"selectedIconPath": "image/icon-tab3-active.png",
"text": "伙伴"
},
{
"pagePath": "pages/more/more",
"iconPath": "image/icon-tab4.png",
"selectedIconPath": "image/icon-tab4-active.png",
"text": "更多"
}
]
}
color
,selectedColor
,backgroundColor
三个参数就是三个地方的颜色,其中pagePath
就是页面的路径
小程序的页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象
但是也有一些属性是app.json里的windows没有的
WXML与WXSS
只有wxml里标签的属性赋值的时候采用等号,其余位置(js,json)的数据都用冒号
链接与图片
navigator
为什么页面的路径有两个imgshow?
第一个imgshow指的是文件夹,第二个imgshow指的是下面的一系列imgshow文件
云存储
挺简单的。
图片的边框美化
.imglist .img{
border-radius: 18px;
box-shadow: 15px 18px 30px rgba(53, 225, 82, 0.26);
}
圆角+阴影,绿了吧唧的
.imglist .circle{
width: 200px;
height: 200px;
border-radius: 100%;
}
构架圆形的方式就是切成正方形,然后曲率百分百
view、navigator、image组件嵌套
CSS3 box-shadow 属性
CSS overflow 属性
CSS line-height 属性
CSS float 属性
页面里有一块如下所示
页面代码如下
<view class="event-box">
<view class="event-address">深圳南山</view>
<view class="event-time">2018年9月22日-23日</view>
</view>
css代码如下
.event-address,.event-time{
float: left;
color: #cecece;
font-size: 12px;
padding-right: 15px;
}
我一时间不明白为什么这两个view在一行了,后来我明白,是样式里的float
,就是浮动,这两个view
都在event-box
这个盒子里,然后float使得这两个样式浮动在这个盒子的左侧(也可以右侧)
WeUI框架
WeUI牛逼!
模板样式的更改
实际上就是在特定页面下的wxss文件修改样式
渐变与动画
background-image: linear-gradient(19deg, rgb(33, 212, 253) 10%, rgb(183, 33, 255) 90%);
上述代码的含义是,从10%处的第一个颜色,变到90%的第二个颜色,0到10范围的颜色等于第一个参数的颜色
<view class="userinfo-display">
<view class="blur-bg"></view>
<view class="user-img">
<image src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/luffy.jpg"></image>
</view>
</view>
.blur-bg {
width: 750rpx;height: 300rpx;
/* overflow: hidden; */
background: url(https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/blurimg.jpg);
background-size: cover;
position: fixed;
filter: blur(5px);
z-index: -1;
}
.user-img{
width: 750rpx;height: 300rpx;
display: flex;
justify-content: center;
align-items:center;
}
.user-img image {
width: 80rpx;height: 80rpx;
border-radius: 100%;
/* z-index: 1; */
}
.blur-bg
使用了position: fixed;
这个参数的含义是,把对象固定到确定的位置,同时设置了position
这个东西的对象是不会干扰到其他对象的位置的。
CSS position 属性
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h2
{
position:fixed;
left:100px;
top:150px;
}
h3
{
position:fixed;
left:120px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对定位了的标题</h2>
<h3>这是一个绝对定位了的标题</h3>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body>
</html>
Transformer
<view>
<text>盒子的多个属性一起动画: width, height, background-color, transform. 将鼠标或手指悬停在盒子上查看动画之后放开。</text>
<view class="animatebox" hover-class="animatebox-hover"></view>
</view>
.animatebox {
display: block;
width: 100px;
height: 100px;
background-color: #4a9d64;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.animatebox-hover {
background-color: #cd584a;
width:200px;
height:200px;
transform:rotate(180deg);
}
上面的案例代码代表着是一次形状转换,代表着样式从animatebox
转变成animatebox-hover
,怎么转变的,就是由下面这个功能决定的
.selector {
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}
transition:width 2s, height 2s, background-color 2s, transform 2s;
,意思为width,height ,background-color,transform
都是transition-property
,代表着转换过程中,需要改变的都有哪些属性,2s意思就是时间,就比如width
的意思就是从animatebox
的width
转换到animatebox-hover
的width
需要两秒。
animation
<view class="fadeIn">
<view>注意会有一个无限颜色渐变变化的动画</view>
<image mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
</view>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation: 4s linear 0s infinite alternate fadeIn;
}
animation
对应的参数为duration | timing-function | delay | iteration-count | direction | name
alternate
动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
数据绑定
<view>{{movies}}</view>
<view>{{movies[1]}}</view>
<view>{{movies[1].actor}}</view>
实际效果如下
因为他们都是OBJ啊
列表渲染与条件渲染
<view wx:for="{{newstitle}}" wx:key="*this">
{{item}}
</view>
不太搞得清wx:key
的含义是什么,
<view wx:for="{{imgUrls}}" wx:key="*this" wx:for-index="idx">
{{imgUrls[idx]}}
</view>
像上面的代码一样,idx
可以嵌套在其他数据表达式里
图片样式
这一节里使用了代码
<view class="page__bd">
<view class="weui-panel weui-panel_access">
<view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movies" wx:key="*item">
<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}" sytle="height:auto"></image>
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
<view class="weui-media-box__title">{{movies.name}}</view>
<view class="weui-media-box__desc">{{movies.desc}}</view>
</view>
</navigator>
</view>
</view>
</view>
实际效果如下,可以看到图片有溢出了
需要修改样式,改成如下就可以了
.weui-media-box__hd_in-appmsg{
height: auto;
}
为什么呢,首先放图片的那个盒子的样式有一个weui-media-box__hd_in-appmsg
,这个样式固定了高度为60,那么如果图片过大的话,就会溢出,所以入股哦我们修改这个样式为auto
,盒子会自动计算内部盒子的高度,然后给个合适的高度
小程序组件
<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{musicinfo.name}}" author="{{musicinfo.author}}" controls></audio>
上面代码里有一个controls
,这个属性的默认值是false
,如果只写一个controls
的话,相当于赋值为true
,而如果写成:controls
的话,就是赋值为false
,不能写成controls=“true”,因为这相当于赋值了一个字符串。
或者就在js文件中定义
1
2
3
4
<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls event-model="bubble">
<view class="covertext">腾讯大学:腾讯特色学习交流平台</view>
<image class="coverimg" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/portal/css/img/nav/logo-bg-color.svg" ></image>
</video>
.covertext{
width: 500rpx;
color: white;
font-size: 12px;
position: absolute;
top:20rpx;
left:10rpx;
}
.coverimg{
width:100rpx;height:23rpx;
position: absolute;
right:10rpx;
top:10rpx;
}
position是absolute
的时候,是相对于父级元素进行绝对定位
地图组件
这个组件很复杂,而且模拟器里的效果和手机效果不太一致
手机效果如下,同时没法点击气泡
手机效果如下,气泡可以点
优化部署与上线
小程序的转发功能
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '云开发技术训练营',
path: "pages/home/home,
imageUrl:"https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
success: function (res) {
// 转发成功
},
fail: function (res) {
// 转发失败
}
}
},
就是一段js代码,返回值的要求可以查文档,代码里括号里的res
不能少,我少了一次然后就得不到想要的效果了
动态模板
我发现动态模板读取不了js文件里的data,解决方案:微信小程序template模板动态传数据
模板文件
<!--pages/common/head.wxml-->
<template name="head">
<view class="page-head">
<view class="page-head-title">{{title}}</view>
<view class="page-head-line"></view>
<view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
</view>
</template>
页面文件,注意那个data参数,得这么写才能读取到数据
<!--pages/home/home.wxml-->
<import src="/pages/common/foot.wxml" />
<import src="/pages/common/head.wxml" />
<text>pages/home/home.wxml</text>
<template is="head" data='{{...templateData}}' />
// pages/home/home.js
Page({
data: {
templateData: {
desc: true,
title: "title"
}
}
})
小程序客服
那个按钮实在太小了
<button open-type="contact" style="width:20px;height:20px"></button>
效果如下