Part2-项目实战

学习目标

1、能够独立完成项目布局与请求

2、解决项目中碰到的bug

3、了解小程序如何部署上线

4、完成项目后能够参与小程序商城开发

一、项目参考地址

项目参考地址：http://codesohigh.com/net163/

注意：是http不是https

项目预览

项目资料

【图片资源资料】

链接：https://pan.baidu.com/s/1QBTAgL1zzt-gPLMVBuh-ng 提取码：iwpk

【项目weapp+小程序版代码】

https://git.code.tencent.com/unify/unified/b1ae4fe6b88cbf99c76f18e99d547aa4120797cf976d58fbe8c459e0e0160c63?strict=true

二、接口文档地址

【叩丁严选接口文档】 http://www.docway.net/project/1Ve70KqViGf/share/1hOXEu6SM0e 阅读密码:zhaowenxian

三、项目准备

1、创建项目

请记得不要勾选云开发

2、样式基础库

删除 "v2" 版本，并选择统一的样式基础库。

3、navigationBar修改

{
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "叩丁严选",
    "navigationBarTextStyle":"black"
  },
}

4、css基础样式

找到 app.wxss ，然后写入：

/**app.wxss**/
page {
  font-family: "黑体";
  font-size: 28rpx;
  color: #333;
  background: #efefef;
}

5、app.js

修改 app.js：

// app.js
App({
  globalData: {
    userInfo: null
  }
})

四、Vant Weapp引入

Vant Weapp官网地址：https://vant-contrib.gitee.io/vant-weapp/#/home

1、依赖安装

打开微信开发者工具的终端，输入：

# npm初始化
npm init -y

# 通过 npm 安装
npm i @vant/weapp -S --production

# 或者通过 yarn 安装
yarn add @vant/weapp --production

图示：

这里注意：

部分同学电脑打不开终端，可以在自己电脑打开cmd，并cd到本项目的目录。

2、修改配置文件

找到 project.config.json 中的 packNpmManually：

{
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

3、构建npm包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

4、全局引入组件

在 app.json 中：

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },
}

在 index.wxml 中：

<van-button type="primary">按钮</van-button>

即可看到按钮出现。

5、按需引入组件

在单独某个页面的json文件中：

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

也可使用button组件，但就只能在该页面中使用button。

五、腾讯工蜂

1、扫码登录

到 腾讯工蜂 扫码登录，然后进入这个界面：

2、初始化三步骤

按照以下提示填写信息即可：

3、创建仓库

点击 创建项目：

然后输入项目名称：

点击 创建项目，选择 https ，看到这个界面就是成功了：

4、现有项目git管理

进入微信开发者工具终端，执行：

git init
git remote add origin 你的仓库地址
git add .
git commit -m "init"
git push -u origin master

无法使用微信开发者工具终端的同学请用git bash here操作。

5、版本管理

点击微信开发者工具的 版本管理：

然后在项目中随意修改一点代码：

<!--index.wxml中随意修改-->

<van-button type="primary">按钮11111</van-button>

再次点开 版本管理：

点击提交后：

点击 推送 后：

再点击 确定 ，就可以上传代码了。刷新仓库页面，可以看到：

六、tabbar配置

小程序的tabbar可以自定义，参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1、app.json配置

我们先创建5个项目页面：

{
  "pages":[
    "pages/home/home",
    "pages/topic/topic",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user"
  ],
}

tabbar配置：

{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/topic/topic",
        "text": "专题"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  },
}

2、vant weapp tabBar引入

在 app.json 中：

{
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-icon": "@vant/weapp/icon/index"
  },
}

3、创建tabbar组件

在项目根目录下创建组件，创建方式可以在 app.json 中：

{
  "pages": [
    "custom-tab-bar/index"
  ],
}

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

4、tabbar组件构建

找到 custom-tab-bar/index.wxml ：

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="darkred" inactive-color="#333">
	<block wx:for="{{list}}" wx:key="index">
		<van-tabbar-item icon="{{item.iconPath}}" icon-active="{{item.selectedIconPath}}">{{item.text}}</van-tabbar-item>
	</block>
</van-tabbar>

在 custom-tab-bar/index.js 中 ：

// custom-tab-bar/index.js
Component({
	data: {
		active: 0,
		list: [{
				"pagePath": "/pages/home/home",
				"text": "首页",
				"iconPath": "home-o",
				"selectedIconPath": "home",
			},
			{
				"pagePath": "/pages/topic/topic",
				"text": "专题",
				"iconPath": "label-o",
				"selectedIconPath": "label",
			},
			{
				"pagePath": "/pages/category/category",
				"text": "分类",
				"iconPath": "apps-o",
				"selectedIconPath": "apps",
			},
			{
				"pagePath": "/pages/cart/cart",
				"text": "购物车",
				"iconPath": "cart-o",
				"selectedIconPath": "cart",
			},
			{
				"pagePath": "/pages/user/user",
				"text": "我的",
				"iconPath": "user-o",
				"selectedIconPath": "user",
			}
		]
	},
	methods: {
		onChange(event) {
			// event.detail 的值为当前选中项的索引
			this.setData({
				active: event.detail
			});

			// 切换tabbar页面
			wx.switchTab({
				url: this.data.list[index].pagePath,
			});
		}
	}
})

5、tabbar页面setData

每个tabbar配置的页面，按照顺序，从0到4设置active

Page({
	onShow(){
		this.getTabBar().setData({
			active: 0		// 0-4
		})
	}
})

七、小程序使用Less

1、vscode安装less插件

打开vscode，安装 Easy Less ：

2、找到扩展

点击文件目录树旁边的 扩展，或是直接按 ctrl+shift+x 快捷键到达这个界面：

然后从打开的窗口中选择：

安装成功后会出现：

3、Less配置

默认小程序是用wxss，但因为Easy-less默认输出的css，我们需要设置一下输出的文件后缀。找到以下位置：

在打开的界面搜索 easy-less：

找到 less.compile：

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

4、编写less

当你在一个页面或组件中删掉原来的 .wxss ，新建.less文件，写完之后只要按ctrl+s，就可以自动编译出来.wxss文件了。

这里注意：

当你做过这些操作后，部分电脑的小程序就会出现各种问题（很难正常编辑），因此慎重使用。如果已经安装的同学，你也可以直接使用vscode编辑，然后在微信开发者工具查看模拟器效果。

5、vscode开发小程序

如果你无法正常使用微信开发者工具（说实话这工具也不怎么好用），那么我们可以在vscode打开这个项目的代码（当然，请不要关闭开发者工具），为了书写方便，我们安装个插件 vscode-wechat：

如此，我们就可以正常开发小程序了。

八、开发小技巧

1、小程序刷新当前页

网上很多刷新当前页的做法是：

this.onLoad();
// 或是
this.onShow();

如果只是为了清除数据刷新页面，恢复初始值的话，可以将data中的数据抽离，然后重新setData即可：

let obj = {username: "xxx"}

Page({
    data: JSON.parse(JSON.stringify(obj)),	// 做一次深拷贝，让data与obj脱钩
    fn(){
        this.setData(obj);	// 重新赋值data，相当于刷新了页面，因为数据还原了
    }
})

2、vant weapp的Dialog使用

vant-weapp官网的Dialog教程中：

这个地址调用比较麻烦，我们可以到 node_modules 中将 dialog.js 文件复制，然后粘贴到 utils 文件夹中，这样就可以放心使用。

3、富文本渲染

假设后台拿到的数据是这样的：

str = "
	<p><img src="" /></p>
    <p><img src="" /></p>
"

渲染时：

<rich-text nodes="{{str}}"></rich-text>

如果想要修改样式，比如修改img标签的样式，此时我们要知道，str中的img是字符串，无法添加类名来修改样式，因此我们先要正则修改字符串：

str = str.replace(/<img/g, '<img class="myimg"')

然后再给 .myimg 写样式：

.myimg{
  width: 100%;
  display: block;
}

4、iPhoneX底部安全区域适配

调用wx.getSystemInfo，获得手机型号（res.model），并存储为全局变量

// app.js
App({
  // 调用wx.getSystemInfo，获得手机型号（res.model），并存储为全局变量
  onLaunch: function () {
    let _self = this;
    wx.getSystemInfo({
      success: (res) => {
        let modelmes = res.model;
        if (modelmes.search("iPhone X") != -1) {
          _self.globalData.isIphoneX = true;
        }
        // wx.setStorageSync("modelmes", modelmes);
      },
    });
  },
  globalData: {
    userInfo: {},
  },
});

在所需页面的js文件的onLoad函数内从全局变量里面拿出来第一步存储的手机型号值，这里设置为isIphoneX：

const app = getApp();

Page({
    onLoad: function(options){
        // let modelmes = wx.getStorageSync('modelmes');
        let isIphoneX = app.globalData.isIphoneX;
        this.setData({
            isIphoneX: isIphoneX
        })
    }
})

给页面添加一个最底部的盒子，或者给整个页面套一个最外层的盒子：

<view class="detail" style="height: {{isIphoneX ? 'calc(100% - 68rpx)' : '100%'}}">
    ...内容
</view>

底部间距为68rpx。

此处需要注意：

App.wxss 的Page高度需要设置，同时detail页面的也需要设置溢出滚动，这样才能保证页面正常滚动：

/* App.wxss */
Page{
	height: 100%;
}

/* detail.wxss */
.detail{
    overflow: scroll;
}

九、相关数据

1、用户页Grid数组

gridArr: [
  {icon: "label-o", txt: "我的订单"},
  {icon: "bill-o", txt: "优惠券"},
  {icon: "goods-collect-o", txt: "礼品卡"},
  {icon: "location-o", txt: "我的收藏"},
  {icon: "flag-o", txt: "我的足迹"},
  {icon: "contact", txt: "会员福利"},
  {icon: "aim", txt: "地址管理"},
  {icon: "warn-o", txt: "账号安全"},
  {icon: "service-o", txt: "联系客服"},
  {icon: "question-o", txt: "帮助中心"},
  {icon: "smile-comment-o", txt: "意见反馈"}
]

2、登录组件

* wxml（/components/Login/Login.wxml）：

<view class="login">
  <view class="login_bg"></view>
  <van-cell-group custom-class="login_form">
    <view class="login_icon">
      <van-icon custom-class="" name="friends-o" size="3em" />
    </view>
    <van-field value="{{phone}}" label="手机号" placeholder="请输入手机号" error-message="{{phoneErrMsg}}" />
    <van-field value="{{password}}" label="密 码" placeholder="请输入密码" error-message="{{pwdErrMsg}}" border="{{false}}" />
    <van-button custom-class="login_btn" type="danger" round block>登录</van-button>
  </van-cell-group>
</view>

* wxss（/components/Login/Login.wxss）：

.login{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.login_bg{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}

.login_form{
  width: 90%;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20rpx;
}

.login_btn{
  margin-top: 20rpx;
}

.login_icon{
  text-align: center;
  margin-bottom: 20rpx;
}

十、作业

【Level-1】达到网页设计师水平

day02：完成首页渲染

day03：专题页html+css+ajax渲染

其中首页要求商品区块组件化

专题页要求实现翻页功能

【Level-2】达到初级前端开发水平

day04：完成分类页侧边切换功能

day05：Chennel页面（从首页九宫格进入）

【Level-3】达到中级前端开发水平

day05：独立完成Popup页面

day06：独立完成商品详情页

【Level-4】达到高级前端开发水平

day07：独立完成Sku+购物车页面