wepy搭建小程序

Posted 2022-02-17 前端e站

1.全局安装或更新WePY命令行工具

npm install wepy-cli -g

 2.在开发目录中用wepy-cli生成项目

wepy init standard

  帮助：可能会生成失败，报错信息：downloading template wepy-cli · Failed to download repo standard: getaddrin，参考https://blog.csdn.net/weixin_38674371/article/details/105990449这篇文章给出的方案。

Project name // 项目叫啥

Project description // 描述一下你这个项目

Author // 作者

Use ESLint to lint your code? // 是否使用ESLint帮你检测代码？  y


Use Redux in your project? // 是否使用Redux来处理状态管理？  y

Use web transform feature in your project? // 在项目中使用Web转换功能？ y

3. 安装项目需要的依赖并开启项目实时编译

npm i

wepy build --watch

 4.最后生成的项目目录

├── dist                   微信开发者工具指定的目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules           
├── src                    代码编写的目录（该目录为使用WePY后的开发目录）
|   ├── components         WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
|   ├── pages              WePY页面目录（属于完整页面）
|   |   ├── index.wpy      index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
|   └── app.wpy            小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json           项目的package配置

5.配置sass 

//安装sass
npm i sass-loader node-sass --save-dev
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev

//配置wepy.config.js
module.exports = 
    "compilers": 
        sass: 
            'outputStyle': 'compressed'
        
    
;

 到此基于wepy框架下的小程序初始结构搭建完成，祝你的在小程序开发的路上越走越远^_^。