アプレット開発

9351 ワード
javascript アプレット mpvue
開発前準備
環境:
Node.js LTSバージョン
WeChat Web開発ツール最新版
git最新版
文書:
本プロジェクトの技術スタックベース
ES 2016
Vue JS
mpvue
WeChatアプレット
クイックスタート
1.    

    git clone https://gitee.com/Fntys/met_wx.git

2.    

    cd met_wx
    
3.    

    npm install
    
4.    

    npm run dev
    
5.    Web    ，
ディレクトリ構造
├── build                       //      
├── config                      //      
├── dist                        //      
├── node_modules                //       
├── src                         //     
│   ├── utils                   //        
│   ├── pages                   //         
│   ├── components              //       
│   ├── assets                  //            
│   ├── components              //       
│   ├── styles                  //         
│   ├── main.js                 //                
│   ├── App.vue                 //       
├── static                      //          
├── .babelrc                    //  babel-loader   
├── .eslintrc.js                //  eslint    
├── .postcssrc.js               //      
├── .gitignore                  //  git    
├── index.html                  //  html  
└── package.json                //  package.json
ページのルート
グローバル設定
まず、プロジェクトのプロファイル/src/main.js の初期内容を見てみます.
import Vue from 'vue'
import App from './App'
import './styles/index.scss'
import {post} from './utils/request.js'
Vue.prototype.$post = post
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()

export default {
    //       app.json
    config: {
        //       ^    ，       ，        ，       webpack entry           
        pages: ['pages/about/main', '^pages/index/main', 'pages/product/main', 'pages/news/main','pages/shownews/main','pages/showproduct/main'],
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: '    ',
            navigationBarTextStyle: 'black'
        },
        tabBar: {
            list: [{
                pagePath: 'pages/index/main',
                text: "  ",
                iconPath: 'assets/home.png',
                selectedIconPath: 'assets/home-active.png'
            }, {
                pagePath: 'pages/product/main',
                text: "  ",
                iconPath: 'assets/product.png',
                selectedIconPath: 'assets/product-active.png'
            }, {
                pagePath: 'pages/news/main',
                text: "  ",
                iconPath: 'assets/news.png',
                selectedIconPath: 'assets/news-active.png'
            }, {
                pagePath: 'pages/about/main',
                text: "  ",
                iconPath: 'assets/about.png',
                selectedIconPath: 'assets/about-active.png'
            }]
        },
        networkTimeout: {
            request: 10000,
            downloadFile: 10000
        },
    }
}
ここのconfigフィールドの下の内容は、小さなプログラム全体の大域的な構成であり、Pagesはページのルートであり、windowはページの一部の構成(ほとんどが上部のバーの構成)であり、これらの構成は最終的には元のウィジェットのap.jsonにパッケージされます.これらの構成についてはよく知らないので、WeChatメソッドのウィジェットドキュメントを参照してください.
ページの設定
ページ構造
本プロジェクトは全部で6ページあります.それぞれ:
├── pages                            //     
│   ├── about                        //       
│   ├── index                        //    
│   ├── news                         //       
│   ├── product                      //       
│   ├── shownews                     //       
│   ├── showproduct                  //
ページを追加
任意の/pages/の下のフォルダをコピーし、名前を変更し、/src/main.jsのconfig.pagesフィールドに追加したページパスを追加します.
  • ページが追加されました.pages/abc
    • .
  • は次いで/src/main.jsの下のconfig.pagesフィールドに'pages/abc/main'
    • を追加する.
    Tips:新規ページフォルダに含める必要があります.main.js、新規ページが追加されたら運転を再開します.npm run devページジャンプ
  • は、リストページから詳細ページにジャンプしたいです.に、詳細ページurlに詳細ページmain.jsを記入するだけでいいです.
  • 要素バインディングtapイベントは、navigator方法を実行する.
    • スタイル
    様式編纂はwx.navigateToを採用している.
    グローバルスタイル
    グローバルスタイルファイルは/src/styles/に保存され、/src/main.jsにおいてimport './styles/index.scss'によってグローバルに導入される.
    ├── styles                             //         
│   ├── common.scss                    //       
│   ├── index.scss                     //       
│   ├── mixin.scss                     //      
│   ├── varable.scss                   //
    ページスタイル
    ページはコンポーネントで構成されることが多いので、ページのスタイルは各コンポーネントに分散されます.src/components/IndexAbout.vueの中の
    indexページのaboutブロックのスタイルに影響を与えました.lang="scss"はコンパイラがどのような文法でcss言語を説明するかを規定しています.ここでは私達が使うscssです.scopedは、そのスタイルが現在のモジュールに作用することを表し、スタイルの私有化の目的がよく実現された、非常に良い機構である.
    Tips:高復用の公共部品に対して慎重に使用するscoped属性
    コンポーネント
    前に述べたように、ページの多くはコンポーネントで構成され、プロジェクトのすべてのコンポーネントがsrc/components/の下に保存されています.
    ├── components                           //       
│   ├── index                            //       
│   │   ├──IndexAbout.vue                //    
│   │   ├──IndexNews.vue                 //     
│   │   ├──IndexProduct.vue              //     
│   │   ├──IndexService.vue              //     
│   ├── inside                           //       
│   │   ├──News.vue                      //      
│   │   ├──Product.vue                   //       
│   │   ├──ShowNews.vue                  //        
│   │   ├──ShowProduct.vue               //        
│   ├── common                           //       
│   │   ├──Banner.vue                    //      
│   │   ├──Sidebar.vue                   //     
│   │   ├──SubcolumnNav.vue              //
    コンポーネントの新規作成と導入
    vueコンポーネントmpvueは単一ファイルコンポーネント(.vueコンポーネント)の形でしかサポートできないので、単一ファイルのコンポーネントだけを新規作成することができます.1.新規ファイルの名前はPascalCaseを採用しています.例えば、Hello World.vue、2.ページにあなたのコンポーネントを紹介します.
    import HelloWorld from '@/components/xxx/HelloWorld'`  //    
components: {
        HelloWorld                                     //    
  }
    3.文字列テンプレートにを使用する
    Tips:@はwebpackのalias、指向性srcは、後続の参照の場所に経路の複雑さを減らすことを目的とする.
    アプレットコンポーネントmpvueは、picker,mapイベントなどのウィジェットのオリジナルコンポーネントをサポートすることができ、注意すべきことは、元のコンポーネント上のイベントバインディングであり、vueのイベントバインディング文法でバインディングする必要があります.
    サンプルコード:
    
    
          : {{date}}
    ネットワーク要求
    WeChatの制限のために、プログラム開始要求はScess方法によって行われなければならない.ここでPromiseのパッケージ化が行われた.1.新規bindchange="eventName" 
    let serverPath = 'http://www.abc.com/api/'
export function post(url,body) {
    return new Promise((resolve,reject) => {
        wx.request({
              url: serverPath + url,    //      url
              data: body,
              method:'POST',
              header: {
                  'content-type': 'application/json'
              },
              success(res) {
                resolve(res.data)  //          
              },
              fail(ret) {
                reject(ret)   //         
              }
            })
    })
}
    2.@change="eventName"においてグローバルに導入され、request.jsのプロトタイプに接続される.
    import {post} from './utils/request.js'
Vue.prototype.$post = post
    3.他のところではthis.$post`を通じて呼び出します.例えば:src/main.js
    Androidの常用配置のLirear Layoutの簡易計算機