Cualquier puerta en el sitio web oficial
Sobre el applet de uni-app hice un poco de introducción antes, esta vez lo volví a contactar, un proceso desde cero, que incluye construir un marco, agregar nuevas páginas, agregar nuevos componentes, etc. Resumámoslo poco a poco.
Construya el proyecto (introduzca complementos básicos)
Este paso estaba escrito en un artículo cuando comencé, por lo que puedo leerlo directamente.
uni-app usa la línea de comando para construir un marco e introduce uni-simple-router y uni-request
Entre ellos, el problema de introducir informes de error uni-simple-router no se ha reproducido en la práctica del proyecto, por lo que volveré a escribir los pasos de introducción.
Primero enumere la dirección del sitio web oficial
Nota: mientras se usa el complemento uni-simple-router, también se usa uni-read-pages para leer la ruta
- Utilice npm para introducir complementos
npm install uni-simple-router
- Introducir uni-read-pages en vue.config.js
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)
})
]
}
}
- Ejemplos en page.json
{
"path": "pages/main/main",
"style": {
"navigationBarTitleText": "登录模板"
},
"name": "main",
"meta": {
"requiredAuth": true }
}
- Agregar archivo
// 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
}
- Introducido en 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
- Cada directorio de archivos (archivo de proyecto, visualización inconveniente)
Imagen de muestra del subprograma WeChat:
Imagen de ejemplo H5:
Nota: Los códigos anteriores son códigos clave, ¡no todos los códigos!
Nueva pagina
La herramienta de desarrollo recomendada para uni-app es Hbuilder, pero la mayoría de nuestro front-end usa vscode
Intentamos agregar páginas y componentes usando la línea de comando
Usando plop
- Se agregó plopfile.js.
Ubicación del archivo, puede encontrar la captura de pantalla de la parte anterior del directorio de archivos
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)
}
- Nueva página de generación de línea de comando y plantilla de componente
Aquí tomamos la página como ejemplo, solo se describen los pasos clave
utils.js-name no puede estar vacío y hay un retraso de un segundo
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-describe la plantilla de página
{
{
#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-describe la configuración y los valores predeterminados de la página
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- describe la ruta para agregar nuevas páginas a pages.json
,{
"path": "pages/{
{name}}/{
{name}}",
"style": {
"navigationBarTitleText": "{
{titletext}}"
}
}
$1
Asegúrese de agregar una línea de "comentario" en pages.json. Esta línea es donde la ruta se agrega automáticamente. Si se elimina, la ruta de la página no se agregará.
- Agregar comandos al archivo de secuencia de comandos
Agregar scripts
"new": "plop"
- Instrucciones
npm run new
Los nuevos componentes no se repetirán aquí, la descripción detallada se puede encontrar en el sitio web oficial