菜单

微信小程序之not found

2019年5月2日 - Json

顶点蛇皮上帝视角之微信小程序之拜别“刀耕火种”

2018/08/22 · 基本功工夫 ·
webpack,
小程序

原来的书文出处: BuptStEve   

当机立断地说,小程序在日常支付中使用原生框架来开辟还是挺不便宜的,比方:

那样一来和平常开销前端页面包车型客车体验相比较来讲,大概就如在刀耕火种

那正是说为了化解那几个主题素材,大家能还是不能够将前端开拓中常用的 webpack
移植到小程序开拓中呢?

自然能够!

图片 1

微信小程序支付的长河新加上的页面wxml的内容能健康展现,然而js文件之中的办法以及数额都爱莫能助调用,张开调节和测试页面发现如下难点

0.源码地址

注:已打包到
https://tuateam.github.io/tua…
中…

图片 2

图片 3

一.文本结构

既然用 webpack 来编写翻译源代码,那么很自然的我们的文书结构首先要分成
src/dist/,开垦者工具的靶子应该是 dist/ 目录。

注:开辟者工具展开的应有是根目录,那样能够保留各类设置,能够在
project.config.json 中配置 "miniprogramRoot": "./dist/",

111.png

1.1.src/ 普通话件结构大要上长这么:

. ├── app │ ├── app.js │ ├── app.json │ └── app.scss ├── assets │ └──
vue-logo.png ├── comps │ └── todo │ ├── todo.js │ ├── todo.json │ ├──
todo.less │ └── todo.wxml ├── pages │ └── index │ ├── index.js │ ├──
index.json │ ├── index.less │ └── index.wxml ├── scripts │ ├── const │ │
├── README.md │ │ └── index.js │ └── utils │ ├── README.md │ ├──
event.js │ ├── format.js │ ├── index.js │ └── log.js ├── styles │ ├──
global.styl │ ├── todomvc-app-css.css │ └── todomvc-common-base.css └──
templates └── info.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.
├── app
│   ├── app.js
│   ├── app.json
│   └── app.scss
├── assets
│   └── vue-logo.png
├── comps
│   └── todo
│       ├── todo.js
│       ├── todo.json
│       ├── todo.less
│       └── todo.wxml
├── pages
│   └── index
│       ├── index.js
│       ├── index.json
│       ├── index.less
│       └── index.wxml
├── scripts
│   ├── const
│   │   ├── README.md
│   │   └── index.js
│   └── utils
│       ├── README.md
│       ├── event.js
│       ├── format.js
│       ├── index.js
│       └── log.js
├── styles
│   ├── global.styl
│   ├── todomvc-app-css.css
│   └── todomvc-common-base.css
└── templates
    └── info.wxml

精心检查过app.json文件之中的配备没有察觉标题,personal.js内的page()也都例行加多了.
然后仔细翻看了调护医疗面板,发掘在前边有1个主题素材,

1.2.dist/ 普通话书结构概略上长这么:

. ├── app.js ├── app.js.map ├── app.json ├── app.wxss ├── assets │ └──
vue-logo.png ├── chunks │ ├── runtime.js │ ├── runtime.js.map │ ├──
scripts.js │ ├── scripts.js.map │ ├── vendors.js │ └── vendors.js.map
├── comps │ └── todo │ ├── todo.js │ ├── todo.js.map │ ├── todo.json │
├── todo.wxml │ └── todo.wxss ├── pages │ └── index │ ├── index.js │ ├──
index.js.map │ ├── index.json │ ├── index.wxml │ └── index.wxss └──
templates └── info.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.
├── app.js
├── app.js.map
├── app.json
├── app.wxss
├── assets
│   └── vue-logo.png
├── chunks
│   ├── runtime.js
│   ├── runtime.js.map
│   ├── scripts.js
│   ├── scripts.js.map
│   ├── vendors.js
│   └── vendors.js.map
├── comps
│   └── todo
│       ├── todo.js
│       ├── todo.js.map
│       ├── todo.json
│       ├── todo.wxml
│       └── todo.wxss
├── pages
│   └── index
│       ├── index.js
│       ├── index.js.map
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── templates
    └── info.wxml

图片 4

一.叁.全部项目文件结构大要上长这么:

. ├── README.md ├── dist/ ├── package.json ├── project.config.json ├──
src/ ├── webpack.config.babel.js └── yarn.lock

1
2
3
4
5
6
7
8
.
├── README.md
├── dist/
├── package.json
├── project.config.json
├── src/
├── webpack.config.babel.js
└── yarn.lock

222.png

2.webpack 基础配置

检查view.js文件发掘是空白了,还尚无写代码,于是增添page()注册页面,难点是view是别的叁个页面,怎么会影响到personal这几个页面吗,不知晓,先改了再说,然后运转调治,难点化解,不领会吗原理,但是能缓慢解决难题就好

2.1.entry/output

小程序场景下的计划相应是多入口,首要分为 apppagescomps
这三类。

在输出 output 部分有个坑:因为小程序接纳的是
global,所以必须抬高配置 output.globalObjectglobal

不然…

JavaScript

thirdScriptError VM937:1 sdk uncaught third Error Cannot read property
‘webpackJsonp’ of undefined TypeError: Cannot read property
‘webpackJsonp’ of undefined at
http://127.0.0.1:40247/appservice/chunks/runtime.js:34:51 at
http://127.0.0.1:40247/appservice/chunks/runtime.js:38:2 at require
(http://127.0.0.1:40247/appservice/\_\_dev\_\_/WAService.js:19:7859) at
http://127.0.0.1:40247/appservice/\_\_dev\_\_/WAService.js:19:7573 at
http://127.0.0.1:40247/appservice/app.js:3:1 at require
(http://127.0.0.1:40247/appservice/\_\_dev\_\_/WAService.js:19:7859) at
http://127.0.0.1:40247/appservice/appservice?t=1527755092895:1020:9 //
runtime var a = window.webpackJsonp = window.webpackJsonp || []

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
thirdScriptError VM937:1
sdk uncaught third Error
Cannot read property ‘webpackJsonp’ of undefined
TypeError: Cannot read property ‘webpackJsonp’ of undefined
    at http://127.0.0.1:40247/appservice/chunks/runtime.js:34:51
    at http://127.0.0.1:40247/appservice/chunks/runtime.js:38:2
    at require (http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7859)
    at http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7573
    at http://127.0.0.1:40247/appservice/app.js:3:1
    at require (http://127.0.0.1:40247/appservice/__dev__/WAService.js:19:7859)
    at http://127.0.0.1:40247/appservice/appservice?t=1527755092895:1020:9
 
 
// runtime
var a = window.webpackJsonp = window.webpackJsonp || []

端详可参考那么些 pr

ps 在 mpvue 中就像是是通过修改 target 完成的…
http://mpvue.com/build/mpvue-…

2.2.CommonChunk

在 webpack 四 中有1个 breaking change,即使用 SplitChunksPlugin
替换了事先很常用的
CommonsChunkPlugin

重大提取了三片段的公物代码:

明天又碰到个新的主题素材:怎样引进那几个 chunks

在前端项目中貌似大家透过 HtmlWebpackPlugin 插件在 html 文件中增添
<script> 标签引进,然鹅小程序中并从未 html 文件…

计将安出?

总不能够每便都手动去 dist/app.js 中 require 那一个文件呢?

那时候就要介绍另1款插件了~:BannerPlugin

以此插件本来是用在文书尾部加多 banner
的,不过也支撑插入代码,因此使用那款插件大家就能够将那些集体重视在
app.js 中联合引入一回就能够。

TODO: 现版本的小程序提供了含有加载技艺,因而这里还有优化空间

2.3.CopyWebpackPlugin

顾名思义,这款插件的用处正是拷贝,利用这款插件咱们就足以兑现:

在应用时有3个知识点可以减去代码量:即 context 选项,那样就绝不写 n 个
src/了…

JavaScript

new CopyWebpackPlugin(copyCfgArr, { context: resolve(‘src’), }),

1
2
3
new CopyWebpackPlugin(copyCfgArr, {
    context: resolve(‘src’),
}),

二.四.预电脑和 CSS 的拍卖

那某些其实都以常规操作和一般 web 开辟没啥分裂,配置好相应的 loader
就可以。

急需留意的点正是放任自流要采取 ExtractTextWebpackPlugin 插件来生成 .wxss
文件。

JavaScript

new ExtractTextPlugin(‘[name].wxss’)

1
new ExtractTextPlugin(‘[name].wxss’)

注:已换成 mini-css-extract-plugin

3.webpack + vue-loader

那有个别商量怎样运用 vue-loader 达成在小程序中引用单文件组件(.vue)。

先看看 src/ 下的文本结构:

. ├── app │ ├── App.vue │ ├── app.js │ └── app.json ├── assets │ └──
vue-logo.png ├── comps │ ├── Filter │ │ ├── Filter.vue │ │ └── index.js
│ └── Todo │ ├── Todo.vue │ └── index.js ├── pages │ ├── index │ │ ├──
Index.vue │ │ └── index.js │ └── todos │ ├── Todos.vue │ └── index.js
├── scripts │ ├── const │ │ ├── README.md │ │ └── index.js │ └── utils │
├── README.md │ ├── event.js │ ├── format.js │ ├── index.js │ └── log.js
├── styles │ ├── global.styl │ ├── todomvc-app-css.css │ └──
todomvc-common-base.css └── templates └── info.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.
├── app
│   ├── App.vue
│   ├── app.js
│   └── app.json
├── assets
│   └── vue-logo.png
├── comps
│   ├── Filter
│   │   ├── Filter.vue
│   │   └── index.js
│   └── Todo
│       ├── Todo.vue
│       └── index.js
├── pages
│   ├── index
│   │   ├── Index.vue
│   │   └── index.js
│   └── todos
│       ├── Todos.vue
│       └── index.js
├── scripts
│   ├── const
│   │   ├── README.md
│   │   └── index.js
│   └── utils
│       ├── README.md
│       ├── event.js
│       ├── format.js
│       ├── index.js
│       └── log.js
├── styles
│   ├── global.styl
│   ├── todomvc-app-css.css
│   └── todomvc-common-base.css
└── templates
    └── info.wxml

其实已经和一般的 web 项目很相像了~

3.1.vue-loader v15?

乘机 webpack 进级到了 v肆,官方与之相配的 vue-loader 也提高到了 v一伍。

近期 Vue Loader 15 使用了多个差异的方针来演绎语言块使用的 loader。

在 v15 中,<style lang="less"> 会实现把它作为一个实打实的 *.less
文件来加载。由此,为了那样管理它,你必要在您的主 webpack
配置中显式地提供一条规则。

粗略来讲正是大家以前安插过的顺序预管理器规则会被 vue-loader 自动使用。

从而大家只须求简单地加多一条规则就可以读取 .vue 文件:

JavaScript

{ test: /\.vue$/, exclude: /node_modules/, loader: ‘vue-loader’,
options: { compiler: { // mock vue-template-compiler compile: () =>
({ staticRenderFns: [], }) }, }, },

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    test: /\.vue$/,
    exclude: /node_modules/,
    loader: ‘vue-loader’,
    options: {
        compiler: {
            // mock vue-template-compiler
            compile: () => ({
                staticRenderFns: [],
            })
        },
    },
},

options.compiler 是啥?

留意:随着 vue-loader 的晋级,那有的的 mock 有变化…

JavaScript

options: { // mock vue-template-compiler compile: () => ({
staticRenderFns: [], }), parseComponent:
require(‘vue-template-compiler’) .parseComponent, }, },

1
2
3
4
5
6
7
8
9
options: {
    // mock vue-template-compiler
    compile: () => ({
        staticRenderFns: [],
    }),
    parseComponent: require(‘vue-template-compiler’)
        .parseComponent,
    },
},

3.2.options.compiler

options.compiler 覆写用来编译单文件组件中 <template>
块的暗中认可编写翻译器。

在事实上行使单文件组件时,大家经过 <template lang="wxml"> 来包裹原本的
.wxml 文件中的内容。

因为最终要编写翻译成 .wxml
文件才具被开垦者工具识别,所以大家还编写了一条规则通过 file-loader
生成最后的 .wxml文件:

JavaScript

{ // 处理 <template lang=”wxml”>{…}</template> // 生成
.wxml 文件 test: /\.wxml$/, use: { loader: ‘file-loader’, options: {
name: getNameByFilePathAndExt(‘.wxml’), }, }, },

1
2
3
4
5
6
7
8
9
10
11
{
    // 处理 <template lang="wxml">{…}</template>
    // 生成 .wxml 文件
    test: /\.wxml$/,
    use: {
        loader: ‘file-loader’,
        options: {
            name: getNameByFilePathAndExt(‘.wxml’),
        },
    },
},

可是因为 vue-loader 暗中同意会编写翻译 template 中的内容将其生成1个个 render
函数。但实在在小程序场景中大家并没有须要这一手续。大家只想安安静静地将那一个代码通过
file-loader 生成 .wxml 文件…

幸好 vue-loader 还提供了 options.compiler
这几个参数用来传递温馨的编写翻译器。所以那边实在是 mock 了瞬间
vue-template-compiler

3.3.Custom Blocks

最终还有个难题尚未缓慢解决:怎样管理 .json 文件?

在任何的小程序框架中是那样处理的:

JavaScript

export default class Index extends wepy.page { //页面配置 config = {
"navigationBarTitleText": "test" }; // ... }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f638bb8934473978340-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8934473978340-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8934473978340-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8934473978340-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8934473978340-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8934473978340-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8934473978340-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8934473978340-8">
8
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f638bb8934473978340-1" class="crayon-line">
export default class Index extends wepy.page {
</div>
<div id="crayon-5b8f638bb8934473978340-2" class="crayon-line crayon-striped-line">
    //页面配置
</div>
<div id="crayon-5b8f638bb8934473978340-3" class="crayon-line">
    config = {
</div>
<div id="crayon-5b8f638bb8934473978340-4" class="crayon-line crayon-striped-line">
        &quot;navigationBarTitleText&quot;: &quot;test&quot;
</div>
<div id="crayon-5b8f638bb8934473978340-5" class="crayon-line">
    };
</div>
<div id="crayon-5b8f638bb8934473978340-6" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f638bb8934473978340-7" class="crayon-line">
    // ...
</div>
<div id="crayon-5b8f638bb8934473978340-8" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

JavaScript

// main.js export default { // 这个字段走 app.json config: { //
页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把
webpack entry 里面的入口页面加进去 pages: \['pages/logs/main',
'^pages/index/main'\], window: { backgroundTextStyle: 'light',
navigationBarBackgroundColor: '\#fff', navigationBarTitleText:
'WeChat', navigationBarTextStyle: 'black' } } } //
src/pages/logs/main.js export default { config: {
navigationBarTitleText: '查看启动日志' } }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f638bb8937356076262-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f638bb8937356076262-21">
21
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f638bb8937356076262-1" class="crayon-line">
// main.js
</div>
<div id="crayon-5b8f638bb8937356076262-2" class="crayon-line crayon-striped-line">
export default {
</div>
<div id="crayon-5b8f638bb8937356076262-3" class="crayon-line">
  // 这个字段走 app.json
</div>
<div id="crayon-5b8f638bb8937356076262-4" class="crayon-line crayon-striped-line">
  config: {
</div>
<div id="crayon-5b8f638bb8937356076262-5" class="crayon-line">
    // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
</div>
<div id="crayon-5b8f638bb8937356076262-6" class="crayon-line crayon-striped-line">
    pages: ['pages/logs/main', '^pages/index/main'],
</div>
<div id="crayon-5b8f638bb8937356076262-7" class="crayon-line">
    window: {
</div>
<div id="crayon-5b8f638bb8937356076262-8" class="crayon-line crayon-striped-line">
      backgroundTextStyle: 'light',
</div>
<div id="crayon-5b8f638bb8937356076262-9" class="crayon-line">
      navigationBarBackgroundColor: '#fff',
</div>
<div id="crayon-5b8f638bb8937356076262-10" class="crayon-line crayon-striped-line">
      navigationBarTitleText: 'WeChat',
</div>
<div id="crayon-5b8f638bb8937356076262-11" class="crayon-line">
      navigationBarTextStyle: 'black'
</div>
<div id="crayon-5b8f638bb8937356076262-12" class="crayon-line crayon-striped-line">
    }
</div>
<div id="crayon-5b8f638bb8937356076262-13" class="crayon-line">
  }
</div>
<div id="crayon-5b8f638bb8937356076262-14" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f638bb8937356076262-15" class="crayon-line">
 
</div>
<div id="crayon-5b8f638bb8937356076262-16" class="crayon-line crayon-striped-line">
// src/pages/logs/main.js
</div>
<div id="crayon-5b8f638bb8937356076262-17" class="crayon-line">
export default {
</div>
<div id="crayon-5b8f638bb8937356076262-18" class="crayon-line crayon-striped-line">
  config: {
</div>
<div id="crayon-5b8f638bb8937356076262-19" class="crayon-line">
    navigationBarTitleText: '查看启动日志'
</div>
<div id="crayon-5b8f638bb8937356076262-20" class="crayon-line crayon-striped-line">
  }
</div>
<div id="crayon-5b8f638bb8937356076262-21" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

tua-mp 中目前采纳的是自定义块的方法来促成的,即在 .vue
文件中新添了七个 <config> 块来编排配置。

<config> { “navigationBarTitleText”: “查看运营日志” }
</config> <template lang=”wxml”> … </template>

1
2
3
4
5
6
7
8
9
<config>
{
  "navigationBarTitleText": "查看启动日志"
}
</config>
 
<template lang="wxml">
    …
</template>

然则并从未将 app.json 的内容放到 App.vue
中,因为偶然须求读取这里的页面配置。如若写到 <config> “ 中的话,就不大概读取了…

比方为了贯彻从分享后的页面后退回来首页那一个效果,在赞助函数中就要求读取页面和
tabBar
配置,生元素享链接(实际享受地址是首页,然后从首页再导航到被分享的页面)。

为此最优解是页面配置写在 <config> ` 中,应用配置写在app.js`
的出口中。

TODO: 达成 mpvue 的点子处理 app.json

实际的配备如下:

JavaScript

{ // 处理 <config>{…}</config> 代码块 // 生成 .json 文件
resourceQuery: /blockType=config/, use: { loader: ‘file-loader’,
options: { name: getNameByFilePathAndExt(‘.json’), }, }, },

1
2
3
4
5
6
7
8
9
10
11
{
    // 处理 <config>{…}</config> 代码块
    // 生成 .json 文件
    resourceQuery: /blockType=config/,
    use: {
        loader: ‘file-loader’,
        options: {
            name: getNameByFilePathAndExt(‘.json’),
        },
    },
},

4.总结

综上,咱们在 webpack v4vue-loader v15
的扶持下,让小程序有所了以下才能:

而是话又说回来了…

原生的小程序…又不是不可能用~

图片 5

注:那句话是杰克 Wong说的,Teacher Luo 没说过那话哟~

以上 to be continued…

1 赞 收藏
评论

图片 6

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图