手の取っ手はあなたを連れて入門のWeChat小さいプログラムの新しい骨組みKboneの使用を信じます。

Kboneフレーム
先日、WeChat開発者の公式アカウントから「ウィーチャットのプログラムKboneの神秘的なベールを開けます。」というツイートが届きました。学習の態度を持って中に入って見ましたが、この枠組みは開発者をとてもかわいがると思います。さすがにWeChatチームの製品です。
この枠組みは去年にすでに発表されました。読み終わったら、自分が早くニュースを知らないで勉強するという枠組みだけが嫌です。私はこの文章を書く目的も風のためです。多くの人にこの枠組みを知ってもらいたいです。その便利さを感じたいです。勉強しやすい人は足を止めてみてください。
Kboneは何ですか？
ここを見ても多くないです。簡単にKboneとは何ですか？公式的な高貴な言葉で：
KboneはWeChatウィジェットとWeb端末の共同構成に取り組む解決策であり、適応層でブラウザ環境をシミュレーションし、Web端末のコードを何も変えずに実行できるようにする。
簡単で乱暴なら、Kboneというフレームワークはコードを書くだけで両端を走ることができます。配置だけで、簡単に小プログラムとWebの両端を走ることができます。
Kbone初探侦---todoList
こんなにたくさん吹いても、手書きコードをつけるべきです。最初はKboneに入門しました。簡単なtodoListから始めました。もちろん、公式にも一連のデモが提供されています。Talk is chep，let's see the code~
プレビュー
正式に始まる前にまず効果図を見て、Kboneフレームのコードが両端を走る不思議を感じます。

開発準備
足場取付/初期化項目

npm install -g kbone-cli 
kbone init to-do-list

コード構築

npm run build

（具体的なページ紹介は後ほど述べる）
Coding
src/home/index.vueに来ました。プロジェクトのトップページの入り口はここにあります。
ここで直接業務コードを書けばいいです。文章がぶかぶかに見えないように、興味のあるものはソースコードを見てもいいです。
プロジェクト実行

ウィジェット端：npm run mp

Web端末：npm run web

二つの命令でプロジェクトを実行すると、Kboneの不思議なところが分かります。コードを通して両端の効果が得られます。もう心配しなくてもいいです。同時に二つのコードを維持します。
Kbone階段---複数ページの開発
先ほど簡単なTodoListを作りました。Kboneに対して簡単な理解ができました。ここで正式に重点に入りました。これからはその使用と複数のページの開発について詳しく説明します。
Kboneディレクトリの理解

├─ build
│ ├─ miniprogram.config.js // mp-webpack-plugin   
│ ├─ webpack.base.config.js // Web        
│ ├─ webpack.dev.config.js // Web          
│ ├─ webpack.mp.config.js //         
│ └─ webpack.prod.config.js // Web          
├─ dist
│ ├─ mp      //           ，           ，      
│ └─ web     // web        ，      
├─ src
│ ├─ common     //     
│ ├─ mp      //         
│ │ ├─ home    //      home   
│ │ │ └─ main.mp.js  //         
│ │ └─ other    //      other   
│ │  └─ main.mp.js  //         
│ ├─ detail     // detail   
│ ├─ home     // home   
│ ├─ list     // list   
│ ├─ router     // vue-router     
│ ├─ store     // vuex     
│ ├─ App.vue    // Web       
│ └─ main.js    // Web      
└─ index.html    // Web      

デモを通して私たちに与えられたこのディレクトリ構造は、各ディレクトリの下の各ファイルの役割を明確に見ることができます。ここでその中のいくつかの書類について説明します。
miniprogram.co nfig.js
このファイルは、ウィジェットの一部の構成について、元のようなjson構成です。
webpack.mp.co nfig.js
ウィジェット端構成、つまり、ウィジェット端コードを構築するwebpack構成であり、複数ページの開発にはその一部構成が用いられます。
src/mp&main.mp.jsmpは、ウィジェットのエントランスファイルを格納するために使用され、ここにはウィジェットのページを設け、main.mp.jsは1つのマウント操作に相当し、mpvueの中のmain.jsと見なした方が分かりやすく、ページルートとマウントマップVueの中のページを設定します。
（他のことがよく分かりますので、詳しくは説明しません。）
Kbone複数ページ開発
作者が前にWeChatアプレットの高倣プロジェクトを書いたので、興味がある人は行ってみてもいいです。
政府筋
公式ページで開発されたデモを見てから、自分の作ったプログラムを簡単にKboneでいくつかのページで試してみたいです。そこで時間をかけて手を動かして、両端を見て走るとどんな効果がありますか？

画像から見ると、Web端とウィジェット端にはまだ微妙な違いがありますが、ただのスタイルです。話は多くないです。次は改ページ開発に来ます。
Vueルーティングの設定
Vueのルート構成は比較的簡単で、直接src/router/index.jsの下に配置すればいいです。比較的簡単で、多くは言いません。

import Vue from 'vue'
import Router from 'vue-router'

const Index = () => import('@/index/Index.vue')
const Explore = () => import('@/explore/Index.vue')
const Cart = () => import('@/cart/Index.vue')
const Me = () => import('@/me/Index.vue')

Vue.use(Router)

export default new Router({
 mode: 'history',
 routes: [
 {
  path: '/(home|index)?',
  name: 'Home',
  component: Index,
 },
 {
  path: '/index.html',
  name: 'HomeHtml',
  component: Index,
 },
 {
  path: '/explore',
  name: 'Explore',
  component: Explore,
 },
 {
  path: '/cart',
  name: 'Cart',
  component: Cart,
 },
 {
  path: '/me',
  name: 'Me',
  component: Me,
 }
 ],
})

ページの作成
ルートによって必要な四つのページを作ります。index、explore、cart、meはそれに相応のコードを書きます。
私はただindexページのコードを書きました。構造は簡単です。効果を見るためには偽のデータを入れました。興味があるなら、私の👉《京東好適小プログラム快速は乗車を待つ~」を参照してください。
ウィジェット端ページの作成/マウントsrc/mpの下に保存されているのは、ウィジェットのエントランスファイル、つまり、ウィジェットの端ページに相当するVueページのマッピングです。各フォルダの下には簡単です。main.mp.jsだけです。

import Vue from 'vue'
import Router from 'vue-router'
import { sync } from 'vuex-router-sync'
import App from '../../App.vue'
import store from '../../store'
import Index from '../../index/Index.vue'

Vue.use(Router)

const router = new Router({
 mode: 'history',
 routes: [{
 path: '/index',
 name: 'Index',
 component: Index,
 }],
})

export default function createApp() {
 const container = document.createElement('div')
 container.id = 'app'
 document.body.appendChild(container)

 Vue.config.productionTip = false

 sync(store, router)

 return new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App)
 })
}

（各ページの構成はほぼ同じです。ルートが違っています。indexページを選択しました。）
この中でVueのルートを導入して、各ページに対応するVueページを配置してレンダリングしています。少しVueの基礎がありますが、やはり分かりやすいです。
プログラムの入り口
前のステップに設定しましたが、Web端末ではもうルートを通じて効果が見られました。しかし、プログラム端では具体的な効果が見られなくて、まだエラーが報告されています。これはキーステップが足りないからです。
例えば、前のステップはプログラムのページにキーを付けましたが、まだ持ってきていません。鍵を開けます。今はそれを持って対応するロックを開けます。

entry: {
 // js   
 index: path.resolve(__dirname, '../src/mp/index/main.mp.js'),
 explore: path.resolve(__dirname, '../src/mp/explore/main.mp.js'),
 cart: path.resolve(__dirname, '../src/mp/cart/main.mp.js'),
 me: path.resolve(__dirname, '../src/mp/me/main.mp.js'),
},

ここに小さなプログラムの入り口を配置すると、小さなプログラムでトップページ（/index）の効果が見られます。
tabBar配合
入り口が配置されていますが、トップページ（／index）の効果だけが見られます。これはtabBarを使う必要があります。
前にページの役割を話していましたが、私はわざわざwebpack.mp.config.jsを提示しました。これはウィジェットの構成についてです。
簡単に言ってください。miniprogram.config.jsの中で後で必要な配置項目です。

entry：入り口ページルーティング（必ずホームページにtabBarを配置した後の入り口ルート）

router：各ページの自分のルート、ページ間のジャンプ用の

generate：出力ウィジェット構成（tabBarはここに配置）

app：ウィジェットウィンドウの構成は、生アプリ.jsonのwindow構成

に相当します。

Pages：各ページの個別構成は、元のページに対応するjsonファイル

に相当する。
設定を開始します。(私が変更した構成のみを一覧表示します。)

entry: '/index',
router: {
 index: ['/(home|index)?','/index.html'],
 explore: ['/explore'],
 cart: ['/cart'],
 me: ['/me'],
},
redirect: {
 notFound: 'index',
 accessDenied: 'index',
},
generate: {
 tabBar: {
  color: '#000000',
  selectedColor: '#DE554F',
  backgroundColor: '#ffffff',
  list: [{
   pageName: 'index',
   text: '  ',
   iconPath: path.resolve(__dirname, '../src/img/home.png'),
   selectedIconPath: path.resolve(__dirname, '../src/img/home-active.png'),
  }],
 },
},
pages: {
 explore: {
  extra: {
   navigationBarTextStyle: 'white'
  }
 }
},

ここの配置は全部同じですから、一つの例を挙げます。
Web端末の完備
前のステップを実行すると、プログラム端の効果はすでに完全に出てきましたが、Web端はtabBarがないので、自分でtabBarを作ってページに置いて、ここでそれを引き出してコンポーネントとして必要なページに置いてください。
私のページ構造は大体こんな感じです。

<template>
 <div class="tabBar for-web">
 <div class="tabBar_border"></div>
 <div class="tabBar_item" v-for="(item, index) in list" :key="index" :data-path="item.pagePath" :data-index="index" @click="switchTab">
  <img :src="selected === index?item.selectedIconPath:item.iconPath">
  <span :class="selected === index ? 'selected' : ''">{{item.text}}</span>
 </div>
 </div>
</template>

次は比較的重要なポイントです。このtabBarはどうやって隠しますか？もう小さなプログラムで表示しません。ここには三つの方法があります。

vue-mprove-loader（容器にcheck-reduceを加える）

reduce-loader（導入時に経路の前にreduce-loaderを追加！）

は、スタイルによって

を非表示にする。
前の2つは構築時に自動的に乾燥されます。ここでは3つ目のスタイルを通して、容器に少しのスタイルを加える傾向があります。

.miniprogram-root {
 .for-web {
 display: none;
 }
}

このステップを実行すると、ページ別にtabBarを開発することができます。残りは各ページに自分の業務内容を追加することです。
結び目
総じてKboneを使って複数ページの開発の手順は、

Vueルーティング

を設定します。

対応ページを作成し、ウィジェットページのマウント登録を行う

。

ウィジェットのエントリを変更し、対応するルーティングを設定する（必要があればtabBarを設定し続けることができる）

。
ログを踏む
開発に使用する画像などの静的資源
demoを書く時、一つの問題を発見しました。tabBarの画像とページをカスタマイズするために必要な画像ファイルを構築する時、ずっと持っていけません。公式に提供された文書を調べてみました。今は相対パスをサポートしていません。静的資源はbase 64に変更するか、あるいはネットアドレスを使うかを考慮しています。ここでは比較的に愚かな方法を使いました。画像をマイクロブログにアップロードして、オンラインアドレスを保存します。
スタイルについて
rpxはkboneではサポートされていないようです。vue+kboneはweb端末にpxを適用してみました。小さいプログラムを構築する時はrpxに転換したいですが、残念ながらそうではないです。WeChatオープンコミュニティに行ってみました。remを適応すると言いました。
npm関連構築
開発者ツールエラーminiprogram.config.jsソリューション：開発者ツールのnpm再構築
まだ解決できない場合は、パッケージされたウィジェットファイルを削除し、再包装します。
swiper
swiperコンパイルしたら、小さなプログラムではスクロールできません。直接に並べて並べて展示します。文書によると、前にwx-のプレフィックスをつけても大丈夫らしいです。もっと探してみます。
（もっと多くのステップ記録は私のr ソース~）
最後の点
最後に、このフレームワークは開発者にとっては友好的で、長い間マイクロクレジットとウェブの二つのエンドコード問題を解決しました。実際にコードを少なく書いて、開発とメンテナンスの仕事量を大幅に軽減しました。役に立つと思ったら使ってみてください。👉 eadme）
githubの住所を添付します。
文書
to-do-list
ここでは、手を持ってあなたを案内します。手を入れてマイクロクレジットの新しい枠組みKboneの使用についての文章を紹介します。もっと多くの関連小プログラムの新しい枠組みKboneの内容は以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。