微信小程序学习笔记3

微信小程序
Word count: 3.3k   |   Reading time≈ 14 min

续二，学习剩下的自定义组件、数据接口调用、页面数据渲染并修改时间戳等等

自定义组件

简介

自定义组件可以方便我们复用写过的代码，提高代码重用率和工作效率，把很多地方都要用到的相同的代码写成组件就可以减少代码量提高工作效率，就好比之前项目里的header和footer这两个类，在首页上也有，跳转到平面设计二级页面也要用，如果要复制就比较麻烦，用自定义组件直接封装好这两个东西，要用的时候直接引用就好了，这就类似PHP里面的文件包含include，把写好的代码拿过来用。另外，他也方便多人协同开发，每个人写不同的组件，要用的时候直接引用就可以了

基础

在根目录下创建一个新文件夹，存放组件库，名字可以随便取，但是为了方便他人理解最好命名为components，然后在components文件夹下再创建新的文件夹，名字就是自定义组件的名字比如我想在wxml里用<tianze></tianze>这个组件，那么就取名叫tianze，然后右键tianze文件夹点击新建component再取名tianze，然后会出来四个文件(tianze.js、tianze.json、tianze.wxml、tianze.wxss)，然后在tianze.wxml里写内容，tianze.wxss里写样式，写完之后，在你需要用到自定义组件的页面里的json文件里有个usingComponents对象，在里面加上"tianze":"/components/tianze/tianze"，属性名是组件名属性值是组件路径，这样在index.wxml里就可以用<tianze></tianze>这个自定义组件了

注意：不要取header和footer名，因为html里有这俩个标签了，命名最好用驼峰命名法，这样看到就知道是自定义组件了，另外自定义组件单标签、对标签都可以使用

将头部和底部用自定义组件独立出来

就把index.wxml里的header类复制到新建的HdView组件的wxml里，把index.wxss里的header类样式也复制到HdView组件的wxss里，然后在index.json里加上"HdView":"/components/HdView/HdView"然后把index.wxml里的header删掉替换成<HdView></HdView>就可以了，底部同理

效果图：

image-20210523135300695

自定义组件的属性传值

这里以下图为例，将自定义自己的属性传值

image-20210523142657028

1.在自定义组件的js里的properti中，设置自定义属性，如：

1
2
3
4
5
6
7
8
9
10
11
properties: {
	//myTitle和myUrl是自定义是属性名，需要指定type类型(String、Number、Array、Object等等)，指定value默认值
    myTitle:{
      type:String,
      value:""
    },
    myUrl:{
      type:String,
      value:""
    }
  },

2.在wxml中渲染从前端传递过来的属性，如：

1
2
3
4
<view class='pubTitle'>
  <view class='txt'>{{myTitle}}</view>
  <navigator url="{{myUrl}}" class='more' open-type="reLaunch">更多></navigator>
</view>

3.在自定义组件上设置属性值，如：

1
2
<PubTitle myTitle="学员作品" myUrl="/pages/works/works"></PubTitle>
<PubTitle myTitle="行业动态" myUrl="/pages/dynamic/dynamic"></PubTitle>

这样就能实现不同的字体显示和不同的跳转，因为works页面和dynamic页面是tabBar页面，所以导航组件的open-type要设置成reLaunch，不然默认的值无法跳转

数据接口的调用方法

调用api接口，在之前的微信小程序API里的网络说过，参考 https://tianzeee.github.io/2021/05/20/wx-small-program2/#%E7%BD%91%E7%BB%9C

将数据渲染到页面并修改时间戳

这里是将首页行业动态里的图片、标题、作者和时间从网络接口动态获取到，并且渲染到页面

下图是原本的行业动态：

image-20210523162418740

用老师做好的api来获取数据 https://ku.qingnian8.com/show.php?cid=16&id=64&type=list

打开接口地址看看：

image-20210523165323851

默认应该是下面这样杂乱无章的json数据

image-20210523165402825

在谷歌商场里安装一个叫JSON Viewer的插件，数据就可以变得如下图清楚了

image-20210523165233025

直接调用api的话会报错，需要在详情-本地设置里勾选不校验合法域名……，然后就可以看到数据了，如图：

image-20210523154831702

修改index.js在页面加载函数里写网络请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
onLoad: function (options) {
   //发送网络请求获取真实的行业动态数据
   wx.request({
     url: 'https://ku.qingnian8.com/school/list.php',
     success:res=>{
       res.data.forEach(item=>{
         var time=item.posttime*1000;
         var d=new Date(time);
         var year=d.getFullYear();
         var month=d.getMonth()+1;
         month=((month>=10)?":":":0")+month;
         var day=d.getDate();
         day=((day>=10)?":":":0")+day;
         var posttime=year+month+day;
         item.posttime=posttime;
       })
       this.setData({
         dataList:res.data
       })
     }
   })
 },

由于api提供的时间是时间戳数据，时间戳是1970年1月1日到现在具体的某个时间所经过的时间，php记录的时间戳是秒数，js记录的是毫秒数。

如下图

image-20210523163133800

因为res.data是请求服务器返回的数据，他是一个数组，里面有9个对象，用forEach函数循环遍历每个res.data里的对象用js处理，要将时间戳转换成具体时间就先乘1000然后用Date函数获取具体时间，剩下的js就是获取年月日，然后用三目运算符判断一下如果是个位数前面加个”:0”，这样不论月和日是单位数还是个位数都是两位数看起来好看，这里有一个要注意的点是函数获取的月份范围是0-11，所以要手动加1，最后拼接出一个具体的posttime然后赋值给item.posttime，最后用this.setData函数设置一个dataList变量并把res.data赋给他，这个dataList就会到data对象里了，这样前端渲染的时候就可以用了

image-20210523163405676

修改index.wxml，把请求api获取到的数据渲染到前端上：

1
2
3
4
5
6
7
8
9
10
11
<navigator class='dyItem' wx:for="{{dataList}}">
  <view class='pic'>
    <image src='{{item.picurl}}'></image>
  </view>
  <view class='txt'>
    <view class='title'>{{item.title}}</view>
    <view class='info'>
      <text space="ensp">作者:{{item.author}}  -  时间:{{item.posttime}}</text>
    </view>
  </view>
</navigator>

效果图：

image-20210523164829289

本来我们希望行业动态里是5个导航组件，因为接口每一页默认返回9个对象，那么wx:for=""就会在行业动态里生成9个导航组件，为了让他变成5个需要在请求的时候加上请求参数num就可以了

image-20210523170059126

修改js代码：

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
onLoad: function (options) {
  //发送网络请求获取真实的行业动态数据
  wx.request({
    url: 'https://ku.qingnian8.com/school/list.php',
    data:{
      num:5
    },
    success:res=>{
      res.data.forEach(item=>{
        var time=item.posttime*1000;
        var d=new Date(time);
        var year=d.getFullYear();
        var month=d.getMonth()+1;
        month=((month>=10)?":":":0")+month;
        var day=d.getDate();
        day=((day>=10)?":":":0")+day;
        var posttime=year+month+day;
        item.posttime=posttime;
      })
      console.log(res.data)
      this.setData({
        dataList:res.data
      })
    }
  })
},

其实就只是加了一个data请求属性里面写上请求个数为5就行了

效果图：

image-20210523170341735

看他的接口参数还有页数也可以写进请求参数里

ES6模块化封装公共函数

前面获取日期的时候用js写了一大堆代码去拼接出一个最终的函数，放在那里面很乱很多，而且可能其他地方也会用到，所以干脆就把他封装成一个公共函数来用

参考官方文档的框架下框架接口里有个模块化 https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html

之前说过utils文件夹是公共文件夹，可以在里面存放js等文件。那我就再utils文件夹里新建文件名为public.js，各种功能的js代码网上很多搜一下可以复制过来，然后只要根据他要求的参数会调用就可以了，内容如下：

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
42
43
44
45
46
var common={
  getStrLen:function(str,len){
    if(str.length>len){
      return str.substr(0,len)+"...";
    }
    else{
      return str;
    }
  },
  getMyData:function(timestamp, formats){
    // formats格式包括
    // 1. Y-m-d
    // 2. Y-m-d H:i:s
    // 3. Y年m月d日
    // 4. Y年m月d日 H时i分
    formats = formats || 'Y-m-d';
    var zero = function (value) {
        if (value < 10) {
            return '0' + value;
        }
        return value;
    };
    var timestamp=timestamp*1000;
    var myDate = timestamp? new Date(timestamp): new Date();
    var year = myDate.getFullYear();
    var month = zero(myDate.getMonth() + 1);
    var day = zero(myDate.getDate());
    var hour = zero(myDate.getHours());
    var minite = zero(myDate.getMinutes());
    var second = zero(myDate.getSeconds());
    return formats.replace(/Y|m|d|H|i|s/ig, function (matches) {
        return ({
            Y: year,
            m: month,
            d: day,
            H: hour,
            i: minite,
            s: second
        })[matches];
    });
  }
}
module.exports=common
//其他写法如下,只能返回单个函数
// export function fun() {
// }

在public.js文件里写模块，里面写了一个common对象，对象里有两个函数，一个是限制标题显示字数超过部分用…表示，一个是将时间戳转换为时间的函数，最后用module.exports=common将common对象向外暴露，这样外面就能用了。

然后修改index.js文件，引入上面写好的模块public.js文件，然后把原来处理时间戳的代码删除，直接用模块里写好的函数就可以了，index.js内容如下：

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
import common from "../../utils/public.js";
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //发送网络请求获取真实的行业动态数据
    wx.request({
      url: 'https://ku.qingnian8.com/school/list.php',
      data:{
        num:5
      },
      success:res=>{
        res.data.forEach(item=>{
          item.posttime=common.getMyData(item.posttime,"Y-m-d")
          item.title=common.getStrLen(item.title,25)
        })
        this.setData({
          dataList:res.data
        })
      }
    })
  },

引入方法和python引入模块差不多，路径好像只能用相对路径，使用绝对路径我报错了，引入后在监听页面加载函数里，加个遍历函数里面调用模块的两个函数就可以了。其实这个标题限制文字长度可以用css去写，这里只是用他来理解模块化的应用

代码整合及小程序上线流程

首先解决一下两个报错

第一个：

image-20210523225147855

这里只要在wx:for后面加上wx:key="index"就可以了，具体参考之前的列表渲染里面有写这个问题 https://tianzeee.github.io/2021/05/20/wx-small-program/#%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93

第二个：

image-20210523225412919

翻译过来是说：有些选择器在组件wxss中是不允许的，包括标签名称选择器、ID选择器和属性选择器。网上查说组件和引用组件的页面不能使用id选择器( #a )、属性选择器( [a] )和标签名选择器，请改用类选择器。所以要把HdView.wxss第12行和15行的标签名选择器改为类选择器，在HdView.wxml里给导航组件加个class='logo'，给图像组件加上class='hdPic'，然后wxss里改成类选择器就可以了，这样两个报错就解决了。

另外，之前在监听页面加载函数里写了个request请求，可以把onLoad中调用的东西独立出去，这样看起来简洁，找代码的时候单独找对应的方法就可以了，就是封装的思想，把常用的方法比较多的代码独立出去，用的时候再调用就可以了，具体如下：

image-20210523230742151

小程序上线流程

1.在微信工作平台 https://mp.weixin.qq.com/ 里点击小程序，跳转到 https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN 然后注册一个号，注册之后完善一些信息填写等等

2.找到里面的AppID替换掉原来使用的测试号image-20210523232653453

3.在开发设置里添加api请求时的合法域名

image-20210523232832463

4.在微信开发者工具里上传

image-20210523232244481

5.上传完成后在版本管理就可以看到了

image-20210523233044339

6.点击提交审核，等审核通过后点击上线就可以了

具体可以参考官方的小程序发布流程，因为提交审核要填写很多数据，我这里就不弄了，上线没法展示了。到这里B站的小程序基础课就学完了，后面看看跟着学长做点东西吧

参考

https://www.cnblogs.com/hellman/p/11007936.html

https://developers.weixin.qq.com/miniprogram/dev/reference/api/module.html

  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2020-2021 Blog of Tianze

请我喝杯咖啡吧~

支付宝
微信