小程序開發

開發前準備

環境:

Node.js LTS版本

微信Web開發工具 最新版

git 最新版

---

文檔:

本項目技術棧基於

ES2016

VueJS

mpvue

微信小程序

快速開始

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則是頁面的一些配置（大部分都是頂部欄的配置），這些配置，最終都會被打包到原生小程序的app.json，對這些配置不瞭解的，建議看一下微信方法的小程序文檔，這裏不作贅述。

頁面配置

頁面結構

本項目共有6個頁面，分別爲：

├── pages                            // 頁面文件
│   ├── about                        //  簡介頁  
│   ├── index                        //  首頁
│   ├── news                         //  新聞列表頁
│   ├── product                      //  產品列表頁
│   ├── shownews                     //  新聞詳情頁
│   ├── showproduct                  //  產品詳情頁

新增頁面

複製任意/pages/下的文件夾，重命名，在/src/main.js的config.pages字段裏添加你新增的頁面路徑，如：

1. 新增了頁面pages/abc
2. 而後在/src/main.js下的config.pages字段中新增'pages/abc/main'

Tips ： 新增頁面文件夾裏必須包含 main.js，新增完頁面後重啓運行 npm run dev

頁面跳轉

1. 用小程序原生的 navigator 組件，好比咱們想從列表頁跳到詳情頁面：<navigator url="../../pages/shownews/main"></navigator>，只需在url處填寫詳情頁面main.js相對於當前頁面的路徑便可。
2. 元素綁定tap事件，執行 wx.navigateTo 方法。

樣式

樣式編寫採用了 Scss

全局樣式

全局樣式文件存放於/src/styles/中
在/src/main.js中經過import './styles/index.scss'被全局引入

├── styles                             //  公共樣式文件 
│   ├── common.scss                    //  公共樣式 
│   ├── index.scss                     //  全局樣式 
│   ├── mixin.scss                     //  混合器 
│   ├── varable.scss                   //  變量

頁面樣式

因爲頁面大可能是由組件組成，因此一個頁面的樣式被分散到各個組件。如：
src/components/IndexAbout.vue中的

<style lang="scss" scoped>
.index_about {
  .about-img img {
    width: 100%;
    margin-bottom: 20px;
  }
  .about-content p {
    font-size: 13px;
    color: rgb(89, 89, 89);
  }
}
</style>

影響了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 (駝峯式命名)，如：HelloWorld.vue，
2.在頁面引入你的組件：

import HelloWorld from '@/components/xxx/HelloWorld'`  //引入組件
components: {
        HelloWorld                                     //組件註冊
  }

3.在字符串模版中使用<hello-world></hello-world>

Tips ： @是 webpack的 alias，指向 src，目的是讓後續引用的地方減小路徑的複雜度

小程序組件

mpvue 能夠支持小程序的原生組件，好比： picker,map 等，須要注意的是原生組件上的事件綁定，須要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，須要寫成 @change="eventName"

示例代碼：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      當前選擇: {{date}}
    </view>
</picker>

網絡請求

因爲微信的限制，小程序發起請求必須經過 wx.request 方法，這裏咱們進行了Promise的封裝。
1.新建request.js

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.在src/main.js中全局引入，並掛在到Vue原型上。

import {post} from './utils/request.js'
Vue.prototype.$post = post

3.在其餘地方經過this.$post`調用，如：
this.$post('getUserinfo',data)