uni-app全端小程序起步 - 搭建项目与命令行新增页面与组件

￡神魔★判官ぃ 2022-10-30 06:26 300阅读 0赞

[官网任意门][Link 1]

关于uni-app小程序之前做过一点入门，这次又重新接触，从无到有的一个过程，包括构建框架，新增页面，新增组件等等。我们一点一点进行总结。

## 搭建项目（引入基础插件） ##

这个步骤在之前我入门的时候写过一篇文章，可直接翻阅。

[uni-app使用命令行搭建框架并引入uni-simple-router及uni-request][uni-app_uni-simple-router_uni-request]

其中关于引入uni-simple-router报错的问题，在此次项目实践中也未复现，重新写一下引入步骤。

首先列出[官网地址][Link 2]

注：在使用了uni-simple-router插件的同时也使用了 uni-read-pages 来读取路由

1.  使用npm引入插件

npm install uni-simple-router

1.  在vue.config.js 中引入uni-read-pages

const TransformPages = require('uni-read-pages')
    const { 
      webpack
    } = new TransformPages()
    
    module.exports = { 
        plugins: [
            new webpack.DefinePlugin({ 
                ROUTES: webpack.DefinePlugin.runtimeValue(() => { 
                    const tfPages = new TransformPages({ 
                        includes: ['path', 'name', 'aliasPath', 'meta'] // 记得加入meta来判断是否需要登录，与 vue-router 相同
                    })
                    return JSON.stringify(tfPages.routes)
                }, true)
            })
        ]
      }
    }

1.  page.json中的实例

{ 
    	"path": "pages/main/main",
    	"style": { 
    	     "navigationBarTitleText": "登录模板"
    	 },
    	 "name": "main",
         "meta": {  "requiredAuth": true }
    }

1.  新增文件

// router.js
    import { 
      RouterMount,
      createRouter
    } from 'uni-simple-router';
    
    
    console.log(ROUTES)
    const router = createRouter({ 
      platform: process.env.VUE_APP_PLATFORM,
      routes: [...ROUTES]
    });
    //全局路由前置守卫
    router.beforeEach((to, from, next) => { 
      console.log('---全局路由前置守卫---')
      console.log(to)
      console.log(from)
      console.log('---------------------')
    // if (to.meta.requiredAuth) { 
    // // 需要登录跳转
    // console.log('需要登录')
    // next('/pages/login/login')
    // } else { 
    // next();
    // }
    });
    // 全局路由后置守卫
    router.afterEach((to, from) => { 
      console.log('跳转结束')
    })
    
    export { 
      router,
      RouterMount
    }

1.  在main.js 中引入

import { router,RouterMount} from './utils/router.js';
    Vue.use(router)
    ....
    //v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
    // #ifdef H5
    RouterMount(app, router, '#app')
    // #endif
    
    // #ifndef H5
    app.$mount(); //为了兼容小程序及app端必须这样写才有效果
    // #endif

1.  各文件目录（项目文件，不便显示）

![在这里插入图片描述][20210218104947488.png]

微信小程序示例图：  
![在这里插入图片描述][20210218104134884.png]

H5示例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]

注：以上代码都为关键代码，非全部代码！

## 新增页面 ##

uni-app推荐使用的开发工具为 Hbuilder，但是我们前端大部分使用的都是 vscode

我们尝试使用命令行新增页面与组件

使用的是 [plop][]

1.  新增 plopfile.js

文件位置，可查找上一部分文件目录截图

const viewGenerator = require('./plop-templates/page/prompt')
    const componentGenerator = require('./plop-templates/component/prompt')
    
    module.exports = function(plop) { 
      plop.setGenerator('page', viewGenerator)
      plop.setGenerator('component', componentGenerator)
    }

1.  新增 命令行生成页面与组件的 模版

![在这里插入图片描述][20210218105810417.png]  
我们这里以page为例，只描述重点步骤

utils.js - name 不能为空，并且有一个生成一秒的延迟

exports.notEmpty = name => { 
      return v => { 
        if (!v || v.trim === '') { 
          return `${ name} is required`
        } else { 
          return true
        }
      }
    }
    exports.delayLog = msg => answers => new Promise((resolve) => { 
    		setTimeout(() => resolve(msg), 1000);
    	});

/page/index.hbs - 描述的为页面的模版

{ { #if template}}
    <template>
        <view class="{ {name}}">
    
        </view>
    </template>
    { { /if}}
    
    { { #if script}}
    <script>
        export default { 
            data() { 
                return { 
                    test: true
                }
            },
            methods: { 
    
            }
        }
    </script>
    { { /if}}
    
    { { #if style}}
    <style lang="scss" scoped>
    
    </style>
    { { /if}}

/page/prompt.js - 描述的为页面的配置及默认设置

const {  notEmpty, delayLog } = require('../utils.js')
    
    module.exports = { 
      description: '创建一个页面',
      prompts: [{ 
        type: 'input',
        name: 'name',
        message: '请输入页面名称：',
        validate: notEmpty('name')
      },
      { 
        type: 'input',
        name: 'titletext',
        message: '请输入页面Title',
        validate: notEmpty('titletext')
      },
      { 
        type: 'checkbox',
        name: 'blocks',
        message: '包含的模块:',
        choices: [{ 
          name: '<template>',
          value: 'template',
          checked: true
        },
        { 
          name: '<script>',
          value: 'script',
          checked: true
        },
        { 
          name: '<style>',
          value: 'style',
          checked: true
        }
        ],
        validate(value) { 
          if (value.indexOf('script') === -1 && value.indexOf('template') === -1) { 
            return 'View require at least a <script> or <template> tag.'
          }
          return true
        }
      }
      ],
      actions: data => { 
        const name = '{ {name}}'
        const actions = [
          delayLog('正在创建页面~~~'),
          { 
            type: 'add',
            path: `src/pages/${ name}/${ name}.vue`,
            templateFile: 'plop-templates/page/index.hbs',
            data: { 
              name: name,
              template: data.blocks.includes('template'),
              script: data.blocks.includes('script'),
              style: data.blocks.includes('style')
            }
          },
          delayLog('页面创建成功，添加路由！'),
          { 
            type: 'modify',
            path: `src/pages.json`,
            pattern: /(\/\/generator router)/gi,
            templateFile: 'plop-templates/page/route.hbs',
          }
        ]
        return actions
      }
    }

/pages/route.hbs - 描述的是向pages.json中添加新增页面的路由

,{ 
          "path": "pages/{ {name}}/{ {name}}",
          "style": { 
            "navigationBarTitleText": "{ {titletext}}"
          }
        }
    $1

一定要在pages.json 中增加一行“注释”，这一行是自动添加路由的位置，如果删除，那么页面路由就添加不上了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

1.  在脚本文件中增加命令

添加在scripts 中

"new": "plop"

![在这里插入图片描述][20210218111105614.png]

1.  使用方法

npm run new

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]

新增组件这里不在赘述，详细描述可参见官网

[Link 1]: https://uniapp.dcloud.io/quickstart
[uni-app_uni-simple-router_uni-request]: https://blog.csdn.net/lb1135909273/article/details/106355354
[Link 2]: https://hhyang.cn/src/router/start/quickstart.html
[20210218104947488.png]: /images/20221024/dde07f9c37a6418aa9dd922e7f274cf7.png
[20210218104134884.png]: /images/20221024/44214dd407214e129d30b752831e115d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20221024/ac586aeca5a64279890070a42271255e.png
[plop]: https://www.npmjs.com/package/plop
[20210218105810417.png]: /images/20221024/87c4295098e94d5eb88f2e12b7052200.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221024/b3af306b4e3f490bbc90624e0cfb17f9.png
[20210218111105614.png]: /images/20221024/4723240899ed4134bbcd7963cc937b87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221024/6cd418f1d3ae4d078d1a5332c1cbbfa0.png