Introduction to Mini Program Development[2]
2024-04-20 22:16:54 #Notes

0x007 高斯模糊的背景

1
2
3
4
5
6
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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(15px);
    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%;
}

0x008 变形属性Transform

1
2
3
4
5
6
7
8
9
10
<view class="transform-display">
    <view>缩放,scale(x,y)，x为长度缩放倍数，y为宽度缩放倍数，如果只有一个值，则是长和宽缩放的倍数</view>
    <image class="scale"  mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
    <view>平移,translate(x,y)，x为x轴平移的距离，y为y轴平移的距离，如果只有一个值，则是x和y轴缩放的距离，值可以为负数</view>
    <image class="translate" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
   <view>旋转,rotate()里的值为旋转的角度</view>
   <image class="rotate"  mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
   <view>倾斜,skew()里的值为旋转的角度</view>
   <image class="skew"  mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.transform-display image{
  width: 80px;height: 80px;
  }
.scale{
    transform: scale(1,0.5);
}
.translate{
    transform: translate(500px,20px);
}
.rotate{
    transform: rotate(45deg);
}
.skew{
    transform: skew(120deg);
}

0x009 过渡属性Transition

语法：transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];}

  • transition-property，应用过渡的 CSS 或动画属性的名称；
  • transition-duration，整个过渡效果持续的时间，默认时间为0秒，所以要有过渡效果这个是必须定义的；
  • transition-timing-function，规定过渡效果的时间曲线，默认为ease；
  • transition-delay，过渡效果延迟多久，或者说何时开始，默认为0秒，不定义的话也就是直接开始；

0x010 背景颜色的变化

同样还是把下面的代码输入到小程序的页面当中，通过实战的方式来查看效果。

使用开发者工具新建一个transition页面，然后在transition.wxml页面里面输入以下代码：

1
2
3
  <view class="transition-display">
      <view class="box bg-color" hover-class="bg-color-hover"></view>
</view>
1
2
3
4
5
6
7
8
  .box{width: 150px;height: 150px;cursor: pointer;}
  .bg-color{
      background-color:green;
  }
  .bg-color-hover{
      background-color: yellow;
      transition: background-color 5s ease-out 3s;
}

动画是需要触发的，这里我们使用的是悬停hover-class来触发效果，把鼠标放在元素上8秒以上，看一下正方形的背景颜色有什么变化。

了解了效果之后，我们再来结合实际案例理解语法：

  • 因为我们是用hover来触发的，所以transition要写在元素的hover-class里，盒子之前的背景是绿色green，悬停的背景是黄色yellow；

  • 因为我们改变的是盒子background-color，所以transition需要过渡的CSS属性名称，就是background-color；

  • 动画过渡持续的时间，我们设置的是5秒，也就是背景由绿色变为黄色的时间；

  • 这里的ease-out（慢速结束）是颜色过渡的时间曲线效果。还可以有linear（匀速）、ease-in（慢速开始）、ease-in-out（慢速开始和慢速结束）。持续的时间很短的情况下，这几个时间曲线效果差别是及其细微的，需要设计师对动画足够敏感了。

  • 动画延迟的时间是3秒，也就是说3秒之后动画才开始。

    一个综合案例，在transition.wxml里输入

1
2
3
4
  <view>
      <text>盒子的多个属性一起动画: width, height, background-color, transform. 将鼠标或手指悬停在盒子上查看动画之后放开。</text>
      <view class="animatebox" hover-class="animatebox-hover"></view>
</view>

在transition.wxss里输入

1
2
3
4
5
6
7
8
9
10
11
12
13
  .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);
}

0x011 动画属性Animation

1
2
3
4
<view class="fadeIn">
 <view>注意会有一个无限颜色渐变变化的动画</view>
    <image mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg" ></image>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes fadeIn {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
 
.fadeIn {
  animation: 4s linear 0s infinite alternate fadeIn;
}

0x05 数据绑定

0x001 数据分离

1
<view>{{username}}，您已登录，欢迎</view>

在js的data里面插入:

1
2
3
data:{
 username:"xx"
}

data 是小程序的页面第一次渲染使用的初始数据。小程序的页面加载时， data 将会以 JSON字符串的形式由逻辑层传至渲染层，因此 data中的数据必须是可以转成 JSON的类型：字符串String，数字Number，布尔值Boolean，对象Object，数组Array。

0x002 数据类型

通过前面的案例我们了解到WXML 中的动态数据均来自对应 Page 的 data。 data 是小程序的页面第一次渲染使用的初始数据。小程序的页面加载时， data 将会以 JSON字符串的形式由逻辑层传至渲染层，因此 data中的数据必须是可以转成 JSON的类型：字符串String，数字Number，布尔值Boolean，对象Object，数组Array。

  • 字符串String，用于存储和处理文本，可以结合Excel单元格格式里的文本格式来理解；
  • 数字Number，这个很好理解，比如233这个数，它的数字格式和文本格式是有很大不同的，学Excel一定不会陌生；
  • 布尔值Boolean，就是true和false，虽然只有两个值，但是它代表着两种选择，两种不同的条件，两种不同的结果；
  • 对象Object，结合之前所学，我们再来回顾一下：对象由大括号{}分隔，在大括号{}内部，对象的属性以名称和值对的形式 name : value来定义，属性由逗号,分隔
  • 数组Array，结合之前所学，我们再来回顾一下：数组由中括号[ ]来分割，有点类似于列表；

0x003 组件属性的渲染

通过数据绑定，我们还可以把 style、class 、id等属性分离出来来控制组件的样式等信息。

1
2
3
<navigator id="item-{{id}}" class="{{itemclass}}" url="{{itemurl}}" >
  <image style="width: {{imagewidth}}" mode="{{imagemode}}" src="{{imagesrc}}"></image>
</navigator>
1
2
3
4
5
6
7
8
data: {
  id: 233,
  itemurl:"/pages/home/imgshow/imgshow",
  itemclass:"event-item",
  imagesrc: "https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
  imagemode:"widthFix",
  imagewidth:"100%",
},

在模拟器里查看显示的效果，发现显示的结果上和之前不采用数据绑定没有什么区别，但是用数据绑定的好处是为我们以后添加大量数据以及进行编程更新打下了基础。

0x004 渲染数组里的单条数据

格式

1
<view>{{newstitle[0]}}</view>
1
2
3
4
5
data: {
   newstitle:[
     
   ],
 }

0x005 渲染对象类型的数据

1
2
3
4
5
6
<image mode="widthFix" src="{{movie.img}}" style="width:300rpx"></image>
<view>电影名：{{movie.name}}</view>
<view>英文名：{{movie.englishname}}</view>
<view>国家：{{movie.country}}</view>
<view>发行年份：{{movie.year}}</view>
<view>简述：{{movie.desc}}</view>
1
2
3
4
5
6
7
8
9
10
data: {
    movie: {
      name: "肖申克的救赎",
      englishname:"The Shawshank Redemption",
      country:"美国",
      year:1994,
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
      desc: "有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！"
    },
  },
1
对象Object类型的数据就被渲染出来:在双大括号{{}}里，输入变量movie+点+属性名即可，这就是**对象的点表示法**。

0x006 复杂的数据嵌套

对象是可以嵌套的，也就是一个对象可以作为另外一个对象的值，除了对象里套对象，数组里也可以套对象，对象里也可以套数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
movies:[
     {
       name: "肖申克的救赎",
       englishname: "The Shawshank Redemption",
       country: "美国",
       year: 1994,
       img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
       desc: "有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！",
       actor:[
         {
           name:"蒂姆·罗宾斯",
           role:"安迪·杜佛兰"
         },
         {
           name:"摩根·弗里曼",
           role:"艾利斯·波伊德·瑞德"
         },
       ]
     },
     {
       name: "霸王别姬",
       englishname: "Farewell My Concubine",
       country: "中国",
       year: 1993,
       img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.webp",
       desc: "风华绝代",
       actor: [
         {
           name: "张国荣",
           role: "程蝶衣"
         },
         {
           name: "张丰毅",
           role: "段小楼"
         },
       ]
     },
   ],
1
2
<view>豆瓣电影排名第2、最重要的主演演员名：</view>
<view>{{movies[1].actor[0].name}}</view>

显示即可出现我们想要的结果

1
2
3
4
5
6
<image mode="widthFix" src="{{movies[1].img}}" style="width:300rpx"></image>
<view>电影名：{{movies[1].name}}</view>
<view>英文名：{{movies[1].englishname}}</view>
<view>发行地：{{movies[1].country}}</view>
<view>发行年份：{{movies[1].year}}</view>
<view>简述：{{movies[1].desc}}</view>

将第二部电影的数据全部渲染

以上适用于电影或者新闻列表渲染

0x06 列表渲染与条件渲染

0x001 渲染数组里的所有数据

相同的结构是列表渲染的前提

在实际的开发场景里，商品、新闻、股票、收藏、书架列表等都会有几千上万条的数据，他们都有一个共同的特征就是数据的结构相同，这也是可以批量化渲染的前提。

Eg:

1
2
3
4
5
6
7
8
9
data: {
    newstitle:[
      "瑞幸咖啡：有望在三季度达到门店运营的盈亏平衡点",
      "腾讯：广告高库存量还是会持续到下一年",
      "上汽集团云计算数据中心落户郑州，总投资20亿元",
      "京东：月收入超2万元快递小哥数量同比增长163%",
      "腾讯：《和平精英》日活跃用户已超五千万",
    ],
  }

将上述数据全部渲染出来

1
2
3
<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}}
</view>

这里wx:for=””，也就是在数组newstitle里进行循环，*this代表在 for 循环中的 item 本身，而的item是默认的。也可以使用如下方法：

1
2
3
<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  {{title}}
</view>

0x002 wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:for 也可以嵌套，下边是一个九九乘法表

1
2
3
4
5
6
7
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

0x003 block wx:for

类似 block wx:if，也可以将 wx:for 用在``标签上，以渲染一个包含多节点的结构块。例如：

1
2
3
4
<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

0x004 wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

0x005 电影列表页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
movies: [{
    name: "肖申克的救赎", 
    img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
    desc:"有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！"},
    {
      name: "霸王别姬",
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
      desc: "风华绝代。"
    },
    {
      name: "这个杀手不太冷",
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.webp",
      desc: "怪蜀黍和小萝莉不得不说的故事。"
    },
    {
      name: "阿甘正传",
      img: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p510876377.webp",
      desc: "一部美国近现代史。"
    },
    {
      name: "美丽人生",
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.webp",
      desc: "最美的谎言。"
    },
    {
      name: "泰坦尼克号",
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.webp",
      desc: "失去的才是永恒的。"
    },
    {
      name: "千与千寻",
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1606727862.webp",
      desc: "最好的宫崎骏，最好的久石让。"
    },
    {
      name: "辛德勒名单",
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p492406163.webp",
      desc: "拯救一个人，就是拯救整个世界。"
    },     
  ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

0x006 Grid九宫格样式参考(适用于界面)

一行三列式

1
2
3
4
5
6
7
8
9
10
<view class="page__bd">
    <view class="weui-grids">
        <block wx:for="{{grids}}" wx:for-item="grid" wx:key="*this">
            <navigator url="" class="weui-grid" hover-class="weui-grid_active">
                <image class="weui-grid__icon" src="{{grid.imgurl}}" />
                <view class="weui-grid__label">{{grid.title}}</view>
            </navigator>
        </block>
    </view>
</view>

<block>的标签，这个标签主要是说明里面包含的是一个多节点的结构块，换成<view>组件也没有太大影响

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
grids:[
      { imgurl:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon1.png",
        title:"招聘"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon2.png",
        title: "房产"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon3.png",
        title: "二手车新车"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon4.png",
        title: "二手"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon5.png",
        title: "招商加盟"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon6.png",
        title: "兼职"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon7.png",
        title: "本地"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon8.png",
        title: "家政"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon9.png",
        title: "金币夺宝"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon10.png",
        title: "送现金"
      },
    ]

一行五列式

1
2
3
.weui-grid{
  width: 20%;
}

0x007 List样式参考(适用于个人中心)

1
2
3
4
5
6
7
8
9
10
11
<view class="weui-cells weui-cells_after-title">
    <block wx:for="{{listicons}}" wx:for-item="listicons">
        <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
            <view class="weui-cell__hd">
                <image src="{{listicons.icon}}" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
            </view>
            <view class="weui-cell__bd">{{listicons.title}}</view>
            <view class="weui-cell__ft weui-cell__ft_in-access">{{listicons.desc}}</view>
        </navigator>
    </block>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
listicons:[{
      icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons1.png",
      title:"我的文件",
      desc:""
    },
    {
      icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons2.png",
      title:"我的收藏",
      desc:"收藏列表"
    },
    {
      icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons3.png",
      title:"我的邮件",
      desc:""
    }
    ],

0x07 小程序组件

0x001 轮播效果

需要用到的轮播组件swiper

1
2
3
4
5
6
7
8
9
10
11
<view class="home-top">
    <view class="home-swiper">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activecolor}}">
          <block wx:for="{{imgUrls}}" wx:key="*this" >
            <swiper-item>
                <image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix"  />
            </swiper-item>
          </block>
        </swiper>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
imgUrls: [
  'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
  'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
  'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
interval: 5000,
duration: 1000,
indicatorDots: true,
indicatorColor: "#ffffff",
activecolor:"#2971f6",
autoplay: true,

要构成一个完整的轮播需要满足：

1.配置相同尺寸规格的图片

2.配置轮播时的面板指示点、动画效果、是否自动播放等

0x002 audio组件(音乐列表)

audio组件是音频组件

1
<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{musicinfo.name}}" author="{{musicinfo.author}}" controls></audio>
1
2
3
4
5
6
musicinfo: {
     poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
     name: '此时此刻',
     author: '许巍',
     src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
   },

audio组件：

  • src：要播放音频的资源地址
  • poster：默认控件上的音频封面的图片资源地址
  • name：默认控件上的音频名字
  • author：默认控件上的作者名字

可能由于audio组件使用的场景和频次都非常低，audio组件以后就要被抛弃了，需要用到小程序的API来创建音乐播放。

0x003 video组件

video组件用来表示视频

1
2
<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" autoplay loop muted initial-time="100" controls event-model="bubble">
</video>

video组件：

  • autoplay：是否自动播放
  • loop：是否循环播放
  • muted：是否静音播放
  • inital-time：指定视频初始播放位置，单位是秒
  • controls：是否显示默认播放控件

0x004 cover效果

可以把view、图片组件覆盖在地图map或视频video组件之上

适用条件情况：

希望在视频的左上角显示视频的标题以及在右上角显示商家的logo，就可以使用cover效果。

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}

0x005 地图组件

要想在地图上标记一个地点，首先我们需要知道该地点的经纬度，这个时候就需要使用到坐标拾取器的工具。

经纬度获取：腾讯地图坐标拾取器

1
2
3
4
5
6
7
8
9
<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers="{{covers}}"
  show-location
></map>
1
2
3
4
5
6
7
8
latitude: 22.540503,
longitude: 113.934528,
markers: [{
  id: 1,
  latitude: 22.540503,
  longitude: 113.934528,
  title: '深圳腾讯大厦'
}],

在地图上标记多个点

markers标记点用于在地图上显示标记的位置，它的数据类型是Array数组

在markers里多添加几个坐标：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
markers: [
     {
       id: 1,
     latitude: 22.540503,
     longitude: 113.934528,
     title: '深圳腾讯大厦'
     },
     {
       id: 2,
       latitude: 22.540576,
       longitude: 113.933790,
       title: '万利达科技大厦'
     },
     {
       id: 3,
       latitude: 22.522807,
       longitude: 113.935338,
       title: '深圳腾讯滨海大厦'
     },
     {
       id: 4,
       latitude: 22.547400,
       longitude: 113.944370,
       title: '腾讯C2'
     },    
   ],

除了marker，还有以下属性:

  • callout:点击marker出现气泡callout、以及气泡上的label，可以丰富点击地图标记弹出丰富的信息介绍；
  • circle：在地图上显示圆，比如用于显示方圆几公里，或者权重大小在地图的可视化
  • polygon：指定一系列坐标点，根据 points 坐标数据生成闭合多边形,，比如圈出实际的范围
  • polyline：指定一系列坐标点，从数组第一项连线至最后一项，比如跑步的路线

0x08 优化部署上线

0x001 小程序的转发功能

只需要在小程序每个页面的js文件下的Page({ }） 里面，添加以下代码，小程序就有转发功能了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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) {
                // 转发失败
            }
        }
    },
  • title为转发的标题，如果不填，默认为当前小程序的名称；
  • path为当前页面路径，也可以为其他页面的路径，如果路径写错的话会显示“当前页面不存在”哦。
  • imageUrl为自定义图片路径，可以是本地文件路径或网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。如果不填写会取当前页面，从顶部开始，高度为 80% 屏幕宽度的图像作为转发图片

0x002 小程序配置的细节

0x0001 没有tabBar的小程序

删掉app.json的tabBar配置项即可。

0x0002 下拉小程序不出现空白

当下拉很多小程序的时候，都会出现一个白色的空白，很影响美观，但是如果在windows的配置项里把backgroundColor和navigationBarBackgroundColor的颜色配置成一样，下拉就不会有空白，比如：

1
2
3
4
5
6
7
"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "HackWork技术工坊",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#1772cb"
  },

0x0003 让整个页面背景变色

可以通过直接设置page的样式来设置，在该页面的wxss文件里添加如下样式:

1
2
3
page{
  background-color: #1772cb;
}

0x0004 禁止页面下拉

适用情况：做的比较短

目的：增强用户体验，不希望用户可以下拉页面，因为下拉页面会有种页面松动的感觉

做法：可以在该页面的json文件里配置

1
2
3
4
5
{
  "window": {
    "disableScroll": true
  }
}

0x003 自定义顶部导航栏

适用情况：官方默认的导航栏只能对背景颜色进行更改，想要在导航栏添加一些比较酷炫的效果

做法：通过自定义导航栏实现，通过设置 app.json中页面配置的 navigationStyle(导航栏样式)配置项的值为 custom，即可实现自定义导航：

1
2
3
"window":{
    "navigationStyle":"custom"
}

给小程序的页面配一个好看的壁纸,home.wxss

1
2
3
page{
    background-image: url(https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/background.jpg)
}

0x004 模板

适用情况：希望所有的页面都有一个相同的底部版权信息

做法：

0x0001 静态的页面片段

使用开发者工具在小程序的pages页面新建一个common文件夹，在common里新建一个foot.wxml，并输入以下代码

1
2
3
4
5
<template name="foot">
  <view class="page-foot">
    <view class="index-desc" style="text-align:center;font-size:12px;bottom:20rpx;position:absolute;bottom:20rpx;width:100%">云开发技术训练营</view>
  </view>
</template>

在要引入的页面比如home.wxml的顶部，使用import引入这个模板

1
<import src="/pages/common/foot.wxml" />

然后在要显示的地方调用比如home.wmxl页面代码的最底部来调用这个模板

1
2
 
<template is="foot" />

0x0002 动态的页面片段

在页面的每一页都有一个相似的页面样式与结果，但是不同的页面有着不同的标题以及页面描述，用数据绑定就能很好的解决这个问题，不同的页面的js data里有不同的数据，而模板的wxml都是固定的框架。

使用开发者工具在小程序的pages页面新建一个common文件夹，在common里新建一个head.wxml，并输入以下代码：

1
2
3
4
5
6
7
<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>

再给每个页面的js里的data里添加不同的title和desc信息，再来在页面先引入head.wxml，然后在指定的位置比如wxml代码的前面调用该模板。

1
2
<import src="/pages/common/head.wxml" />
<template is="foot" />

注意创建模板时，使用的是<template name="模板名"></template>，而调用模板时，使用的是<template is="模板名" />，两者之间对应。

0x005 小程序的客服

适用情况：开发者在小程序内添加客服消息按钮组件，用户就可在小程序内唤起客服会话页面，给小程序发消息。而开发者（可绑定其他运营人员）也可以直接使用微信公众平台网页版客服工具或者移动端小程序客服小助手进行客服消息回复

做法：

在wxml文件里添加如下代码，即可唤起客服会话页面

1
<button open-type="contact"></button>

0x006 web-view

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

web-view组件可打开关联的公众号的文章

适用于自媒体用户

公众号文章可以使用第三方的工具比如秀米

1
<web-view src="https://mp.weixin.qq.com/cgi-bin/wx"></web-view>

web-view的也可以绑定备案好的域名，支持JSSDK的接口，因此很有小程序为了省开发成本，点击链接打开的都是网页，并没有做小程序的原生开发，这个就不再讨论范围之内了。

Prev
2024-04-20 22:16:54 #Notes
Next