标签：index 01 项目 app icons 如下 font pages 商城

目录

• 接口文档
• 帮助文档
• 项目搭建
  • 新建小程序项目
  • 搭建目录结构
• 搭建项目的页面
• 引入字体图标
• 搭建tabBar部分
• 初始化页面

首先应该是一些准备工作,下面是几个文档

接口文档

接口文档

大致类似如下,有描写有关接口的url地址和使用方式

帮助文档

小程序开发文档
mdn
阿里巴巴字体 iconfont

项目搭建

新建小程序项目

填入自己的appid

这里需要说明的是,大部分的功能在测试号都是可以完成的
但是只要涉及到微信支付,就必须要有一个企业认证...
所以支付的功能在暂时是无法测试的..

搭建目录结构

首先新建一个项目后,我们要删除一些无关文件/文件夹.
utils/暂时用不到,进行删除.

初始创建文件中的log页面可以进行删除

删除`pages/log/`
在app.json的pages中删除 log

app.wxss中的内容进行删除
pages/index.wxss中的内容进行删除
pages/index.wxml中的内容进行删除

app.js中的内容进行删除,重新生成

App({
    ...
})

pages/index.js中的内容进行删除,重新生成

Page({
    ...
})

添加全局标题和首页标题
编辑pages/index.wxml代码如下

<view>
    首页
</view>

编辑app.json代码如下,(设置全局标题)

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

编辑pages/index.json代码如下,(设置页面标题)

{
  "usingComponents": {},
  "navigationBarTitleText": "优购首页"
}

显示效果如下

接着下图,搭建起项目的基本结构(就是新建文件夹)

搭建项目的页面

下面要按照如下页面进行搭建

编辑app.json代码如下

{
  "pages":[
    "pages/index/index",
    "pages/category/category",
    "pages/goods_list/goods_list",
    "pages/goods_detail/goods_detail",
    "pages/cart/cart",
    "pages/collect/collect",
    "pages/order/order",
    "pages/search/search",
    "pages/user/user",
    "pages/feedback/feedback",
    "pages/login/login",
    "pages/auth/auth",
    "pages/pay/pay"
  ],
  ...

引入字体图标

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

新建styles/iconfont.wxss,编辑代码如下

@font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879'); /* IE9 */
    src: url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.eot?t=1558237601879#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.woff?t=1558237601879') format('woff'),
    url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.ttf?t=1558237601879') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_1199223_3th2jwrfikp.svg?t=1558237601879#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-shoucang1:before {
    content: "\e631";
  }
  
  .icon-shoucang:before {
    content: "\e66d";
  }
  
  .icon-receipt-address:before {
    content: "\e673";
  }
  
  .icon-kefu:before {
    content: "\e601";
  }
  
  .icon-fukuantongzhi:before {
    content: "\e60c";
  }
  
  .icon-ding_dan:before {
    content: "\e61b";
  }
  
  .icon-yixianshi-:before {
    content: "\e616";
  }
  
  .icon-gouwuche:before {
    content: "\e610";
  }
  
  .icon-tuihuotuikuan_dianpu:before {
    content: "\e773";
  }
  

需要全局导入该wxss,编辑app.wxss代码如下

@import "./styles/iconfont.wxss"

编辑pages/index/index.wxml,编辑代码如下

...
<view>
    <text class=".iconfont .icon-shoucang1"></text>
    <text class=".iconfont .icon-shoucang"></text>
    <text class=".iconfont .icon-receipt-address"></text>
    <text class=".iconfont .icon-kefu"></text>
</view>

显示效果如下

搭建tabBar部分

需要实现准备好图片

新建一个文件夹icons,将这些图片都放入其中.
编辑app.json代码如下

...
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  },
...

显示效果如下:

初始化页面

初始化代码如下,由于小程序不支持通配符,所以这里一个标签一个标签的写.
同时修改定义字体的大小单位为rpx,这样字体的大小就是响应式的
这里使用css原生定义变量的方式.

编辑app.wxss代码如下

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

/* 在微信小程序中 不支持 通配符 '*' */

page,
view,
text,
swiper,
swiper-item,
image,
navigator {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*
 主题颜色 通过变量来实现 
 1 less 中 存在 变量这个知识
 2 原生的css和wxss也是支持 变量 
 */
page {
  /* 定义主题颜色 */
  --themeColor: #eb4450;
  /*
     定义统一字体大小  假设设计稿 大小是 375px 
     1px= 2rpx
     14px = 28rpx
      */
  font-size: 28rpx;
}

image {
  width: 100%;
}

同时需要修改窗体的主题颜色,修改app.json代码如下

...
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f8554d",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle": "black"
  },
...

显示效果如下

标签：index,01,项目,app,icons,如下,font,pages,商城
来源： https://www.cnblogs.com/Rowry/p/14297977.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。