关于uni-app小程序之前做过一点入门，这次又重新接触，从无到有的一个过程，包括构建框架，新增页面，新增组件等等。我们一点一点进行总结。
搭建项目（引入基础插件）
这个步骤在之前我入门的时候写过一篇文章，可直接翻阅。
uni-app使用命令行搭建框架并引入uni-simple-router及uni-request
其中关于引入uni-simple-router报错的问题，在此次项目实践中也未复现，重新写一下引入步骤。
首先列出官网地址
注：在使用了uni-simple-router插件的同时也使用了 uni-read-pages 来读取路由
- 使用npm引入插件
npm install uni-simple-router
- 在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)
})
]
}
}
- page.json中的实例
{
"path": "pages/main/main",
"style": {
"navigationBarTitleText": "登录模板"
},
"name": "main",
"meta": {
"requiredAuth": true }
}
- 新增文件
// 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
}
- 在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
- 各文件目录（项目文件，不便显示）
微信小程序示例图：
H5示例图：
注：以上代码都为关键代码，非全部代码！
新增页面
uni-app推荐使用的开发工具为 Hbuilder，但是我们前端大部分使用的都是 vscode
我们尝试使用命令行新增页面与组件
使用的是 plop
- 新增 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)
}
- 新增 命令行生成页面与组件的 模版
我们这里以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 中增加一行“注释”，这一行是自动添加路由的位置，如果删除，那么页面路由就添加不上了
- 在脚本文件中增加命令
添加在scripts 中
"new": "plop"
- 使用方法
npm run new
新增组件这里不在赘述，详细描述可参见官网