以前に少し紹介したユニアプリアプレットについて、今回はフレームワークの構築、新しいページの追加、新しいコンポーネントの追加などのプロセスを最初からやり直しました。少しずつまとめてみましょう。
プロジェクトをビルドします（基本的なプラグインを紹介します）
このステップは私が始めたときに記事に書かれていたので、直接読むことができます。
uni-appは、コマンドラインを使用してフレームワークを構築し、uni-simple-routerとuni-requestを導入します
なかでも、ユニシンプルルーターエラーレポートの導入の問題は、プロジェクトの実践では再現されていないので、導入手順を書き直します。
最初に公式ウェブサイトのアドレスをリストします
注：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
- 各ファイルディレクトリ（プロジェクトファイル、不便な表示）
WeChatアプレットのサンプル画像：
H5のサンプル画像：
注：上記のコードはキーコードであり、すべてのコードではありません。
新しいページ
ユニアプリに推奨される開発ツールは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)
}
- 新しいコマンドライン生成ページとコンポーネントテンプレート
ここでは例としてページを取り上げ、重要な手順のみを説明します
utils.js-nameを空にすることはできず、1秒の遅延があります
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に「comment」の行を追加してください。この行はルートが自動的に追加される場所です。削除すると、ページルートは追加されません。
- スクリプトファイルにコマンドを追加する
スクリプトを追加する
"new": "plop"
- 指示
npm run new
新しいコンポーネントはここでは繰り返されません。詳細な説明は公式ウェブサイトにあります。