微信小程序学习1《语法、创建项目、tabbar、搜索框、轮播图》

最新推荐文章于 2024-04-27 19:48:28 发布

x-dragon8899

最新推荐文章于 2024-04-27 19:48:28 发布

阅读量2.5k

点赞数 1

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

本文链接：https://blog.csdn.net/m0_45234510/article/details/108514836

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下一篇微信小程序学习2《导航栏、首页楼层》

一、环境准备

1、注册账号

https://mp.weixin.qq.com/wxopen/waregister?action=step1
在这里插入图片描述

2、获取APPID

在这里插入图片描述

3、下载开发工具并安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

在这里插入图片描述

二、运行工具

1、扫码登录

在这里插入图片描述

2、新建项目

在这里插入图片描述

三、语法

1、全局配置文件-Pages字段

pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。

在这里插入图片描述

2、全局配置文件-Window字段

window字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

3、全局配置文件-tabBar字段

查看tabBar其他属性

在这里插入图片描述

4、页面配置文件page.json

页面配置
在这里插入图片描述

5、sitemap.json ⽂件

sitemap属性

⼩程序根⽬录下的sitemap.json⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

在这里插入图片描述

6、text/view

在这里插入图片描述

四、项目准备

1、创建项目

2、整理项目结构和内容

3、添加页面的标题

在这里插入图片描述

4、创建新的文件夹

在这里插入图片描述

5、创建需要的页面

然后回到微信开发工具保存
在这里插入图片描述

6、引入图标

打开阿里巴巴图标

加入购物车

在这里插入图片描述

新建iconfont.wxss
在这里插入图片描述

然后在app. wxss中导入

@import './styles/iconfont.wxss';

在这里插入图片描述

五、完成tabBar区域

1、准备图标

在这里插入图片描述

2、tabBar

在这里插入图片描述

 "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },

3、效果

在这里插入图片描述

六、完成搜索框样式

1、初始化样式

在这里插入图片描述

/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

page{
    /* 定义主题颜色 */
    --themeColor:#eb4450;
    /* 定义统一字体大小 */
    font-size: 28rpx;
}

在这里插入图片描述

2、新建组件SearchInput

在这里插入图片描述

3、引入这个组件

在这里插入图片描述

4、在页面中使用

在这里插入图片描述

5、安装Easy LESS插件

在这里插入图片描述

    "less.compile": {
        "outExt": ".wxss"
    }

6、编辑SearchInput.wxml

<view class="search_input">
    <navigator class="" target="" url="/pages/search/index" hover-class="navigator-hover" open-type="navigate">
        搜索
    </navigator>
      
</view>

7、编辑SearchInput.less

.search_input{
    height: 90rpx;
    padding: 10rpx;
    background-color: var(--themeColor);
    navigator{
        height: 100%; 
        display: flex;
        justify-content: center;
        align-items: center; 
        background-color: #fff;
        border-radius: 15rpx;
        color: #666;
    }
}

保存之后自动生成wxss文件
在这里插入图片描述

8、效果

在这里插入图片描述

七、完成轮播图

请求数据的注意点

在这里插入图片描述

https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1519217537&lang=zh_CN

在这里插入图片描述

1、发起请求

在这里插入图片描述

data: {
    //轮播图数组
    swiperList:[]
    
  },
  //页面开始就会加载
  onLoad: function(options) {
    // 1 发送异步请求获取数据
    var reqTask = wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      success: (result) => {
        console.log(result);  
        this.setData({
          swiperList:result.data.message
        })
      }
    });

2、swiper标签

在这里插入图片描述

<view class="navigator">
  <!--  搜索框 开始 -->
  <SearchInput></SearchInput>
  <!-- 搜索框 结束 -->
  <!-- 轮播图 开始 -->
  <view class="index_swiper">
    <swiper autoplay  indicator-dots circular>
      <swiper-item 
      wx:for="{{swiperList}}"
      wx:key="goods_id">
         <navigator>
           <image src="{{item.image_src}}"></image>
         </navigator>
        
      </swiper-item>
        
    </swiper>
  </view>
    

</view>

3、编写样式

在这里插入图片描述

.index_swiper{ 
    swiper{
        width: 750rpx;
        height: 340rpx;
        image{  
            width: 100%;
        }
    }
}

4、效果

在这里插入图片描述

八、优化请求

1、新建request/index.js

在这里插入图片描述

export const request=(params)=>{
    return new Promise((resolve,reject)=>{
        wx.request({
            ...params,
            success:(result)=>{
                resolve(result);
            },
            fail:(err)=>{
                reject(err);
            }
        });
    })
}