学习目标
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+购物车页面
