【小程序】小程序技术训练营学习笔记-part1

于 2020-03-04 20:07:14 发布
阅读量300 收藏 1
点赞数
分类专栏： web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dominic_z/article/details/104651046
版权

开始学学小程序的基础，个人笔记部分，无参考意义
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范围的颜色等于第一个参数的颜色

CSS z-index 属性

<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>

CSS cursor 属性

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>

效果如下
在这里插入图片描述

dominic_z
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值