[小程序]微信小程序项目搭建

微信小程序项目搭建

1.配置全局结构

1.1搭建项目的目录

目录名	功能
styles	公共样式
components	组件
lib	第三方库
utils	帮助库
request	接口帮助库

1.2搭建项目的页面

页面名	功能
index	首页
category	分类
goods_list	商品列表
goods_detail	商品详情
cart	购物车
collect	收场
order	订单
search	搜索
user	个人中心
feedback	意见反馈
login	登录
auth	授权
pay	结算

• 批量添加啊路径的链式编程
  • 1.“CTRL+ALT+方向上/下键”：链式选行
  • 2.”CTRL+D“：文本匹配（相仿字段将被选中）
  • 3.”SHIFT+END"：批量选中光标至句尾所有文本
  • 4.“SHIFT+方向左/右键”：批量向左/右移动光标

2.配置全局样式

2.1配置图标

• 小程序有内存大小限制，需要通过调取在.wxss中调取url并命名类，再在.wxml中调取类属性进行大量图片导入.
• 遗憾的是，tabBar图标不支持网络图片.

2.2配置tabBar

tabBar初始化配置示例

    /* app.json */
    "tabBar": {
        "color": "#a9a9a9",
        "selectedColor": "#1f1f1f",
        "backgroundColor": "#fefefe",
        "borderStyle": "white",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "image/icon_home.png",
                "selectedIconPath": "image/icon_home_select.png"
            },
            {
                "pagePath": "pages/home/home",
                "text": "我的",
                "iconPath": "image/icon_person.png",
                "selectedIconPath": "image/icon_person_select.png"
            }
        ]
    },

注意：目前项目1.tabBar的图标/字体还要跟据后续主题颜色调整配色，2.标题字体大小改进

2.3初始化页面样式

配置app.wxss，通过变量赋值全局颜色、定义全局字体；导入央视文件夹中的样式文件

3.自定义组件

3.1搜索框

• 创建组件：在components文件夹下新建一套component

  • 示例：搜索框功能的实现（其实就是在页面上加了个框）

    /* SearchInput.wxss */
    .search_input{
        height: 80rpx;
        padding: 10rpx;
        background-color: var(--themeColor);
    }
    
    .search_input navigator {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 15rpx;
      color: #666;
    }
    
    <!-- SearchInput.wxml -->
    <view class="search_input" >
        <navigator url="../../pages/search/search">
        搜索
        </navigator>
    </view>
    

    注意：后续搜索框精进还需1.加入图标，2.提醒字符左对齐，3.如果可以的话添加识图功能

• 引入组件：在相应的页面文件夹中的.json文件中添加组件文件的相对路径，在.wxml通过标签的方式调用，标签名即为文件名

  /*index.json/
  {
    "usingComponents": {
      "SearchInput":"../../components/SearchInput/SearchInput"
    }
  }
  
  <!-- index.wxml -->
  <view class="e_search">
      <SearchInput></SearchInput>
  </view>
  

4.调用API

4.1如何调用API

/* index.js */
/*在生命周期的OnLoad模块使用wx.request发送请求（类Ajax）*/

	onLoad: function (options) {
        wx.request({
            url: '',										/*请求的url*/
            data: {},										/*发送的数据*/
            header: {'content-type':'application/json'},	/*请求头（默认值）*/
            method: 'GET',									/*请求方式（默认值）*/
            dataType: 'json',								/*返回值类型（默认值）*/
            responseType: 'text',							/*返回数据类型（默认值）*/
            success: (result)=>{							/*请求成功调用函数*/
                
            },
            fail: ()=>{},									/*请求失败调用函数*/
            complete: ()=>{}								/*请求成功或失败调用函数*/
        });
    },

• 发起请求的所有url必须在小程序开发后台中进行服务器域名配置，仅支持https
• 仅用作测试可以在 详情->本地设置->勾选 不校验域名合法性