微信小程序【启动默认首页方式、轮播图、数据渲染等】

最新推荐文章于 2024-08-27 10:11:02 发布

December_shi

最新推荐文章于 2024-08-27 10:11:02 发布

阅读量3.6k

点赞数 4

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/december_shi/article/details/115675137

版权

本文介绍了微信小程序的开发技巧，包括设置默认启动首页的三种方法、轮播图的实现、引用阿里云图标、网络请求获取数据、数据渲染、mock技术、上拉下拉加载事件、点击区域跳转、查看大图、阻止事件冒泡、封装组件、 vant组件的使用，以及实现搜索和滚动选择器等功能。

摘要由CSDN通过智能技术生成

微信小程序

1、小程序默认启动首页方法（3种）

方法一：

在app.json文件中把默认启动的首页提到最前面

在这里插入图片描述

方法二：

配置编译参数：

在这里插入图片描述

方法三：

添加 entryPagePath 配置项

在这里插入图片描述

2、轮播图

swiper文档链接地址

<view>
  <swiper>
    <swiper-item>
      <image src="/images/avatar/1.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/avatar/2.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/avatar/3.png"></image>
    </swiper-item>
  </swiper>
</view>

在这里插入图片描述

轮播图用到的几个属性

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换

3、引用阿里云图标

阿里云图标库中找到需要的图标，生成链接
转到链接里，右键进行下载
下载下来后，把后缀名css改成wxss
使用@import引入

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
```
/** common.wxss **/
.small-p {
     
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
     
  padding:15px;
}
```

4、网络请求获取数据

wx.request网络请求文档链接

在这里插入图片描述

  onLoad: function (options) {
   
    wx.request({
   
      url: 'https://www.fastmock.site/mock/feab55dd20334e49edf0d5adb2f79cbe/libai-server/api/posts',
      method:'GET',
      success(res){
   
        console.log(res);
      },
      fail(err){
   
        console.log(err);
      }
    })
  },