写在前面的话

上一篇我们讲到了环境的搭建，这一讲我们围绕着我们搭建好的环境，找一个开源的小程序项目先熟悉起来

我们以 电商项目 为例一步一步填坑

将项目下载到本地

模仿别人的项目第一步就是，将别人的工程clone到本地。先跑起来在说接下来的事情。

git clone git@github.com:dyq086/wepy-mall.gitcd wepy-mall
sudo npm install
wepy build --watch

很遗憾的告诉你这个项目真的跑不起来！！！

使用能运行的空项目

我们使用上一讲创建的wepy小程序的空项目，将这个跑不起来的项目一点一点的加入进来。首先第一步我们需要先把页面加入进来

不管三七二十一，先把代码弄过来

这里有个文件是需要我们对照一下看看的，如果你跟我一样对这个app.wpy文件有一些好奇心的话，当然如果没有你直接覆盖也行！

<style lang="less">
@import "./styles/base";
@import "./styles/icon";
@import "./styles/style";</style>
<script>
import wepy from 'wepy';
import 'wepy-async-function'
export default class extends wepy.app {config = {pages: ['pages/authorize','pages/home','pages/home_detail','pages/classify','pages/shop_cart','pages/info','pages/search','pages/test','pages/sign_in','pages/exchange_goods','pages/wholesale','pages/replenishment_goods','pages/register','pages/order','pages/reorder','pages/pay_success','pages/points','pages/points_more','pages/points_rule','pages/collection','pages/messages','pages/setting','pages/goods_detail','pages/comfire_order','pages/address','pages/order_detail','pages/filter','pages/logistics','pages/comment','pages/comment_add'],window: {backgroundTextStyle: 'dark',navigationBarBackgroundColor: '#FFFFFF',navigationBarTitleText: 'WeChat',navigationBarTextStyle: 'black',enablePullDownRefresh: false,backgroundColor: '#EFEFEF'},"tabBar": {"color": "#999999","selectedColor": "#ff6a3c","backgroundColor": "#ffffff","borderStyle": "black","list": [{"pagePath": "pages/home","text": "首页","iconPath": "images/icon_home.png","selectedIconPath": "images/icon_home_active.png"}, {"pagePath": "pages/classify","text": "分类","iconPath": "images/icon_classify.png","selectedIconPath": "images/icon_classify_active.png"}, {"pagePath": "pages/shop_cart","text": "购物车","iconPath": "images/icon_shop_cart.png","selectedIconPath": "images/icon_shop_cart_active.png"}, {"pagePath": "pages/info","text": "我","iconPath": "images/icon_info.png","selectedIconPath": "images/icon_info_active.png"}]}}globalData = {}constructor() {super()this.use('requestfix')this.use('promisify');}async onLaunch(option) {}
}</script>

细心的小伙伴门就会发现，这个文件跟小程序的

这三个文件的内容很相似

wepy 其实就是vue的语法规则，稍许的不同。wepy就是小程序的三个文件合并之后的效果，正确的说法应该是wpy文件在编译成小程序的过程中会生成js，json，wxss三个文件。

我们需要在这个文件里做一些配置：页面路径配置，窗体配置，导航配置，以及全局样式导入，三方框架导入和初始化

配置文件修改

当我们对上述的文件改好以后，我们可以先运行一下

wepy build --watch

根据提示内容我们发现，项目中缺少一些三方库的引入

这个时候我们需要关注一下 package.json 这个文件

{"name": "wxYuHanStore","version": "1.0.2","description": "wxYuHanStore project","main": "dist/app.js","scripts": {"dev": "wepy build --watch","build": "cross-env NODE_ENV=production wepy build --no-cache","dev:web": "wepy build --output web","clean": "find ./dist -maxdepth 1 -not -name 'project.config.json' -not -name 'dist' | xargs rm -rf","test": "echo \"Error: no test specified\" && exit 1"},"wepy": {"module-a": false},"author": "yongqing <490844594@qq.com>","license": "MIT","dependencies": {"wepy": "^1.6.0","wepy-async-function": "^1.4.4","wepy-com-toast": "^1.0.2","wepy-plugin-imagemin": "^1.5.3","wepy-plugin-uglifyjs": "^1.3.7"},"devDependencies": {"babel-eslint": "^7.2.1","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-decorators-legacy": "^1.3.4","babel-plugin-transform-export-extensions": "^6.22.0","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.6.1","cross-env": "^5.1.3","eslint": "^3.18.0","eslint-config-standard": "^7.1.0","eslint-friendly-formatter": "^2.0.7","eslint-plugin-html": "^2.0.1","eslint-plugin-promise": "^3.5.0","eslint-plugin-standard": "^2.0.1","wepy-compiler-babel": "^1.5.1","wepy-compiler-less": "^1.3.14","wepy-eslint": "^1.5.3"}
}

主要关注这个地方，对比一下我们的空工程，看一下作者额外又引入了那些三方库

 "dependencies": {"wepy": "^1.6.0","wepy-async-function": "^1.4.4","wepy-com-toast": "^1.0.2","wepy-plugin-imagemin": "^1.5.3","wepy-plugin-uglifyjs": "^1.3.7"},

修改完成之后，我们需要使用命令安装一下三方库

sudo npm install 

最后再编译运行，我们就能看到运行起来的小程序啦！当然这个时候我们会看到控制台又很多错误提示，我们把相对应的eslint进行关闭.(wepy.config.js )

const path = require('path');
var prod = process.env.NODE_ENV === 'production';module.exports = {wpyExt: '.wpy',eslint: false,//关闭eslintcliLogs: !prod,build: {web: {htmlTemplate: path.join('src', 'index.template.html'),htmlOutput: path.join('web', 'index.html'),jsOutput: path.join('web', 'index.js')}},resolve: {alias: {counter: path.join(__dirname, 'src/components/counter'),'@': path.join(__dirname, 'src')},aliasFields: ['wepy', 'weapp'],modules: ['node_modules']},compilers: {less: {compress: prod},/*sass: {outputStyle: 'compressed'},*/babel: {sourceMap: true,presets: ['env'],plugins: ['transform-class-properties','transform-decorators-legacy','transform-object-rest-spread','transform-export-extensions',]}},plugins: {},appConfig: {noPromiseAPI: ['createSelectorQuery']}
}if (prod) {// 压缩sass// module.exports.compilers['sass'] = {outputStyle: 'compressed'}// 压缩jsmodule.exports.plugins = {uglifyjs: {filter: /\.js$/,config: {}},imagemin: {filter: /\.(jpg|png|jpeg)$/,config: {jpg: {quality: 80},png: {quality: 80}}}}
}

这样我们就可以过滤掉我们不想看的语法检查提示啦

遗留问题

运行起来后我们会发现项目还有一些问题
1.页面都是空白
2.api接口都挂了
3.页面数组传值有问题
等等等问题
这些问题我们会在后续的章节中继续讲解

结束语

喜欢加个关注支持一下后续会有更多更新内容，我好困啊我要睡觉了

项目地址

https://github.com/crobotvip/smallshop.git