advanced installer更换程序id_好程序员web前端培训分享kbone高级-事件系统

  好程序员web前端培训分享kbone高级-事件系统:1、用法,对于多页面的应用,在 Web 端可以直接通过 a 标签或者 location 对象进行跳转,但是在小程序中则行不通;同时 Web 端的页面 url 实现和小程序页面路由也是完全不一样的,因此对于多页开发最大的难点在于如何进行页面跳转。

3d012892e3538608914177b6bffffdcd.png

  1.1 修改 webpack 配置

  对于多页应用,此处和 Web 端一致,有多少个页面就需要配置多少个入口文件。如下例子,这个应用中包含 page1、page2 和 page2 三个页面:

// webpack.mp.config.js

module.exports = {

entry: {

page1: path.resolve(__dirname, '../src/page1/main.mp.js'),

page2: path.resolve(__dirname, '../src/page2/main.mp.js'),

page3: path.resolve(__dirname, '../src/page3/main.mp.js'),

},

// ... other options

}

1.2 修改 webpack 插件配置

mp-webpack-plugin 这个插件的配置同样需要调整,需要开发者提供各个页面对应的 url 给 kbone。

module.exports = {

origin: 'https://test.miniprogram.com',

entry: '/page1',

router: {

page1: ['/(home|page1)?', '/test/(home|page1)'],

page2: ['/test/page2/:id'],

page3: ['/test/page3/:id'],

},

// ... other options

}

其中 origin 即 window.location.origin 字段,使用 kbone 的应用所有页面必须同源,不同源的页面禁止访问。entry 页面表示这个应用的入口 url。router 配置则是各个页面对应的 url,可以看到每个页面可能不止对应一个 url,而且这里的 url 支持参数配置。

有了以上几个配置后,就可以在 kbone 内使用 a 标签或者 location 对象进行跳转。kbone 会将要跳转的 url 进行解析,然后根据配置中的 origin 和 router 查找出对应的页面,然后拼出页面在小程序中的路由,最后通过小程序 API 进行跳转(利用 wx.redirectTo 等方法)。

2、案例

在 kbone-advanced 目录下创建 02-mulpages 目录。本案例在这个目录下实现。

2.1 创建 package.json

cd 02-mulpages

npm init -y

编辑 package.json:

{

"name": "01-env",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"mp": "cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules"

},

"dependencies": {

"add": "^2.0.6",

"vue": "^2.5.11"

},

"browserslist": [

"> 1%",

"last 2 versions",

"not ie <= 8"

],

"devDependencies": {

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-preset-env": "^1.6.0",

"cross-env": "^5.0.5",

"css-loader": "^0.28.7",

"file-loader": "^1.1.4",

"html-webpack-plugin": "^4.0.0-beta.5",

"mini-css-extract-plugin": "^0.5.0",

"optimize-css-assets-webpack-plugin": "^5.0.1",

"stylehacks": "^4.0.3",

"vue-loader": "^15.7.0",

"vue-template-compiler": "^2.6.10",

"webpack": "^4.29.6",

"webpack-cli": "^3.2.3",

"mp-webpack-plugin": "latest"

},

"keywords": [],

"author": "",

"license": "ISC"

}

安装依赖包:

npm install

2.2 配置 webpack

在 02-mulpages 目录下创建 build 文件夹,在文件夹下创建 webpack.mp.config.js 文件,内容如下:

const path = require('path')

const webpack = require('webpack')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const { VueLoaderPlugin } = require('vue-loader')

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const TerserPlugin = require('terser-webpack-plugin')

const MpPlugin = require('mp-webpack-plugin') // 用于构建小程序代码的 webpack 插件

const isOptimize = false // 是否压缩业务代码,开发者工具可能无法完美支持业务代码使用到的 es 特性,建议自己做代码压缩

module.exports = {

mode: 'production',

entry: {

page1: path.resolve(__dirname, '../src/page1/main.mp.js'),

page2: path.resolve(__dirname, '../src/page2/main.mp.js'),

page3: path.resolve(__dirname, '../src/page3/main.mp.js'),

},

output: {

path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代码目录中的 common 目录下

filename: '[name].js', // 必需字段,不能修改

library: 'createApp', // 必需字段,不能修改

libraryExport: 'default', // 必需字段,不能修改

libraryTarget: 'window', // 必需字段,不能修改

},

target: 'web', // 必需字段,不能修改

optimization: {

runtimeChunk: false, // 必需字段,不能修改

splitChunks: { // 代码分隔配置,不建议修改

chunks: 'all',

minSize: 1000,

maxSize: 0,

minChunks: 1,

maxAsyncRequests: 100,

maxInitialRequests: 100,

automaticNameDelimiter: '~',

name: true,

cacheGroups: {

vendors: {

test: /[/]node_modules[/]/,

priority: -10

},

default: {

minChunks: 2,

priority: -20,

reuseExistingChunk: true

}

}

},

minimizer: isOptimize ? [

// 压缩CSS

new OptimizeCSSAssetsPlugin({

assetNameRegExp: /.(css|wxss)$/g,

cssProcessor: require('cssnano'),

cssProcessorPluginOptions: {

preset: ['default', {

discardComments: {

removeAll: true,

},

minifySelectors: false, // 因为 wxss 编译器不支持 .some>:first-child 这样格式的代码,所以暂时禁掉这个

}],

},

canPrint: false

}),

// 压缩 js

new TerserPlugin({

test: /.js(?.*)?$/i,

parallel: true,

})

] : [],

},

module: {

rules: [

{

test: /.css$/,

use: [

MiniCssExtractPlugin.loader,

'css-loader'

],

},

{

test: /.vue$/,

loader: [

'vue-loader',

],

},

{

test: /.js$/,

use: {

loader: 'babel-loader',

options: {

presets: ['env']

}

},

exclude: /node_modules/

},

{

test: /.(png|jpg|gif|svg)$/,

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

},

resolve: {

extensions: ['*', '.js', '.vue', '.json']

},

plugins: [

new webpack.DefinePlugin({

'process.env.isMiniprogram': true, // 注入环境变量,用于业务代码判断

}),

new MiniCssExtractPlugin({

filename: '[name].wxss',

}),

new VueLoaderPlugin(),

new MpPlugin(require('./miniprogram.config.js')),

],

}

在 02-mulpages/build 文件夹下创建 miniprogram.config.js 文件,内容如下:

module.exports = {

origin: 'https://test.miniprogram.com',

entry: '/',

router: {

page1: ['/a'],

page2: ['/b'],

page3: ['/c'],

},

redirect: {

notFound: 'page1',

accessDenied: 'page1',

},

generate: {

appEntry: 'miniprogram-app',

// 构建完成后是否自动安装小程序依赖。'npm':使用 npm 自动安装依赖

autoBuildNpm: 'npm'

},

runtime: {

cookieStore: 'memory',

},

app: {

navigationBarTitleText: 'kbone-multiple-pages',

},

global: {

share: true,

},

pages: {

page1: {

extra: {

navigationBarTitleText: 'page1',

},

},

},

projectConfig: {

appid: '',

projectname: 'kbone-multiple-pages',

},

packageConfig: {

author: 'Felixlu',

}

}

2.3 编写三个页面

在 /src/ 下创建 page1, page2, page3 三个文件夹,在文件夹里创建三个页面,每个页面由 App.vue 和 main.mp.js 两个文件组成。

1、page1 页面

/src/page1/App.vue 内容:

当前 url:{{url}}

当前页跳转

新开页面跳转

当前页跳转

新开页面跳转

.cnt {

margin-top: 20px;

}

a, button {

display: block;

width: 100%;

height: 30px;

line-height: 30px;

text-align: center;

font-size: 20px;

border: 1px solid #ddd;

}

/src/page1/main.mp.js 内容:

import Vue from 'vue'

import App from './App.vue'

export default function createApp() {

const container = document.createElement('div')

container.id = 'app'

document.body.appendChild(container)

return new Vue({

el: '#app',

render: h => h(App)

})

}

/src/common/Header.vue 内容:

wechat-miniprogram-header

.header {

margin-bottom: 10px;

width: 100%;

text-align: center;

}

/src/common/utils.js 内容:

export function printf(str) {

console.log('common/utils.js --> ', str)

}

/src/common/Footer.vue 内容:

.footer {

margin-top: 10px;

width: 100%;

text-align: center;

}

2、page2 页面

/src/page2/App.vue 内容:

当前 url:{{url}}

回到首页

回到首页

relaunch

.cnt {

margin-top: 20px;

}

a, button {

display: block;

width: 100%;

height: 30px;

line-height: 30px;

text-align: center;

font-size: 20px;

border: 1px solid #ddd;

}

/src/page2/main.mp.js 内容:

import Vue from 'vue'

import App from './App.vue'

export default function createApp() {

const container = document.createElement('div')

container.id = 'app'

document.body.appendChild(container)

return new Vue({

el: '#app',

render: h => h(App)

})

}

3、page3 页面

/src/page3/App.vue 内容:

当前 url:{{url}}

回到上一页

关闭当前窗口

.cnt {

margin-top: 20px;

}

a, button {

display: block;

width: 100%;

height: 30px;

line-height: 30px;

text-align: center;

font-size: 20px;

border: 1px solid #ddd;

}

/src/page3/main.mp.js 内容:

import Vue from 'vue'

import App from './App.vue'

export default function createApp() {

const container = document.createElement('div')

container.id = 'app'

document.body.appendChild(container)

return new Vue({

el: '#app',

render: h => h(App)

})

}

2.4 小程序端效果预览

npm run mp

24329e16e408afc65db843bc26dde815.png
58cd41a6e284274f7d53ca97cbc3ccbd.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/389089.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ai对话机器人实现方案_显然地引入了AI —无代码机器学习解决方案

ai对话机器人实现方案A couple of folks from Obviously.ai contacted me a few days back to introduce their service — a completely no-code machine learning automation tool. I was a bit skeptical at first, as I always am with supposedly fully-automated solutio…

网络负载平衡的

网络负载平衡允许你将传入的请求传播到最多达32台的服务器上&#xff0c;即可以使用最多32台服务器共同分担对外的网络请求服务。网络负载平衡技术保证即使是在负载很重的情况下它们也能作出快速响应。 网络负载平衡对外只须提供一个IP地址&#xff08;或域名&#xff09;。 如…

透明状态栏导致windowSoftInputMode:adjustResize失效问题

当我们通过下面代码&#xff1a; getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR); 设置状态栏透明&#xff0c;当界面存在EditText时&#xff0c;在activity里面设置windowSoftInputMode:…

[TimLinux] JavaScript 元素动态显示

1. css的opacity属性 这个属性用于&#xff1a;设置元素的不透明级别&#xff0c;取值范围&#xff1a;从 0.0 &#xff08;完全透明&#xff09;到 1.0&#xff08;完全不透明&#xff09;&#xff0c;元素所在的文本流还在。这个属性的动态变化可以用来设置元素的淡入淡出效果…

神经网络 CNN

# encodingutf-8import tensorflow as tfimport numpy as npfrom tensorflow.examples.tutorials.mnist import input_datamnist input_data.read_data_sets(MNIST_data, one_hotTrue)def weight_variable(shape): initial tf.truncated_normal(shape, stddev0.1) # 定义…

图片中的暖色或冷色滤色片是否会带来更多点击? —机器学习A / B测试

A/B test on ads is the art of choosing the best advertisement that optimizes your goal (number of clicks, likes, etc). For example, if you change a simple thing like a filter in your pictures you will drive more traffic to your links.广告的A / B测试是一种选…

3d制作中需要注意的问题_浅谈线路板制作时需要注意的问题

PCB电路板是电子设备重要的基础组装部件&#xff0c;在制作PCB电路板时&#xff0c;只有将各个方面都考虑清楚&#xff0c;才能保证电子设备在使用时不会出现问题。今天小编就与大家一起分享线路板制作时需要注意的问题&#xff0c;归纳一下几点&#xff1a;1、考虑制作类型电路…

冷启动、热启动时间性能优化

用户希望应用程序能够快速响应并加载。 一个启动速度慢的应用程序不符合这个期望&#xff0c;可能会令用户失望。 这种糟糕的体验可能会导致用户在应用商店中对您的应用进行糟糕的评价&#xff0c;甚至完全放弃您的应用。 本文档提供的信息可帮助您优化应用的启动时间。 它首先…

python:lambda、filter、map、reduce

lambda 为关键字。filter&#xff0c;map&#xff0c;reduce为内置函数。 lambda&#xff1a;实现python中单行最小函数。 g lambda x: x * 2 #相当于 def g(x):return x*2print(g(3))# 6 注意&#xff1a;这里直接g(3)可以执行&#xff0c;但没有输出的&#xff0c;前面的…

集群

原文地址&#xff1a;http://www.microsoft.com/china/MSDN/library/windev/COMponentdev/CdappCEnter.mspx?mfrtrue 本文假设读者熟悉 Windows 2000、COM、IIS 5.0 摘要 Application Center 2000 简化了从基于 Microsoft .NET 的应用程序到群集的部署&#xff0c;群集是一组…

Myeclipes连接Mysql数据库配置

相信大家在网站上也找到了许多关于myeclipes如何连接mysql数据库的解决方案&#xff0c;虽然每一步都按照他的步骤来&#xff0c;可到最后还是提示连接失败&#xff0c;有的方案可能应个人设备而异&#xff0c;配置环境不同导致。经过个人多方探索终于找到一个简单便捷的配置方…

cnn图像二分类 python_人工智能Keras图像分类器(CNN卷积神经网络的图片识别篇)...

上期文章我们分享了人工智能Keras图像分类器(CNN卷积神经网络的图片识别的训练模型)&#xff0c;本期我们使用预训练模型对图片进行识别&#xff1a;Keras CNN卷积神经网络模型训练导入第三方库from keras.preprocessing.image import img_to_arrayfrom keras.models import lo…

图卷积 节点分类_在节点分类任务上训练图卷积网络

图卷积 节点分类This article goes through the implementation of Graph Convolution Networks (GCN) using Spektral API, which is a Python library for graph deep learning based on Tensorflow 2. We are going to perform Semi-Supervised Node Classification using C…

[微信小程序] 当动画(animation)遇上延时执行函数(setTimeout)出现的问题

小程序中当动画animation遇上setTimeout函数内部使用this.setData函数&#xff0c;通常情况下会出现报错。本文先告诉解决方法&#xff0c;后分析报错原因 1.解决方法&#xff1a; 在 setTimeout() 函数的同级加上 const that this; &#xff0c;然后将this.setData换成that…

关于使用pdf.js预览pdf的一些问题

手机应用中pdf展示使用非常广泛&#xff0c; 一些pdf由于特殊的内容比如文字、电子签章必须使用复杂的解析器来解析&#xff0c;当使用MultiPdf 这个库加载&#xff0c;会使得包变得非常庞大&#xff0c; 这里我们考虑使用pdf.js 来解析pdf. 引用非常简单&#xff0c;只需要把…

SqlHelper改造版本

using System;using System.Configuration;using System.Data;using System.Data.SqlClient;using System.Collections; /// <summary> /// SqlHelper类是专门提供给广大用户用于高性能、可升级和最佳练习的sql数据操作 /// </summary> public abstract c…

回归分析预测_使用回归分析预测心脏病。

回归分析预测As per the Centers for Disease Control and Prevention report, heart disease is the prime killer of both men and women in the United States and around the globe. There are several data mining techniques that can be leveraged by researchers/ stat…

VMware文件共享

VMware tools 文件共享 已经安装后&#xff1a; vmhgfs-fuse .host:/ /mnt/hgfs

npm 问题(一)

今天在使用npm安装程序时出现了以下问题如下&#xff1a; 我解决了问题&#xff0c;这是由于缓存清除错误&#xff08;但他们自动修复&#xff09;有一些数据损坏&#xff0c;没有让JSON文件解析&#xff0c;使用以下命令可以解决&#xff1a;即&#xff1a; npm cache clean -…

UDP打洞程序包的源码

C#实现UDP打洞 转自&#xff1a;http://hi.baidu.com/sdfiyon/blog/item/63a6e039155e02f23a87ceb1.html 下面是UDP打洞程序包的源码&#xff1a;//WellKnown公用库using System;using System.IO;using System.Runtime.Serialization.Formatters.Binary;using System.Net ;usi…