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

一、环境准备

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字段?定义?程序所有??的顶部背景颜?，?字颜?定义等。

相关属性：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#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);}});})
}

2、改造index.js

3、效果