小程序 --- > 项目小练手Ⅰ

1. 接口文档

2. 帮助文档

1. 小程序开发文档

2. mdn

3. 阿里巴巴字体 iconfont

3. 项目搭建

3.1 新建小程序项目

填入自己的appid: wxdbf2b5e8c2f521a3

3.2 文件结构

• 一级目录

目录名	作用
styles	存放公共样式
components	存放组件
lib	存放第三方库
utils	自己的帮助库
request	自己的接口帮助库
pages	存放页面.

• app.json

{
   
  "pages": [
    "pages/index/index"
  ],
  "windows": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Marron购物",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

• app.wxss

(空)

• app.js : 快捷键 wx-app + tab

• pages/index.wxml

<view>首页</view>

• pages/index.wxss

• pages/index.js: wx-page + tab

3.3 搭建项目的页面

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

直接修改app.json中的属性: pages

{
   
  "pages": [
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/index",
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Marron - 购物车",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

微信的编辑器会帮助自动生成对应的页面文件

3.4 引入字体图标

1. 打开阿里巴巴字体图标(网站)
2. 选择的图标
3. 添加至项目
4. 下载到本地
5. 将样式文件由css修改为wxss
6. 小程序中引入

在全局样式中,引入某个样式

// app.wxss
@import "./styles/iconfont.wxss";

3.5 搭建项目tabbar

• 在app.json中,输入tabBar + tab.生成首页的导航栏(位于手机底部)

3.6 全局样式

需求: 假设现在需要设置主题颜色为: #d81e06; 字体大小为14px.

在微信的样式中(.wxss),可以通过如下方式来定义全局变量.

/*  /app.wxss: 项目目录下 */
page{
   
    /* 主题颜色 */
    --themeColor: #d81e06;