詳解微信小程序開發（項目從零開始）

　　建立完小程序以後，咱們先不着急開發。工欲善其事必先利其器，微信開發者工具備點卡，並且功能少，開發效率很低。因此咱們仍是改造本身的編譯器，這裏只介紹2種方法。一是 hbuilderX，他有支持小程序的模塊，很小巧的一款編譯器；二是 webstorm，我用的他，在這介紹一下配置的方法，其餘的你們自行google吧。

　　一、支持wxml和wxss的文件類型，有語法高亮。打開webstorm編譯器，依次點擊文件 -- 設置 -- 編輯器 -- 文件類型，找到 html文件，添加 *.wxml; 找到Cascading style Sheet ，添加 *.wxss。就OK了

　　二、支持小程序代碼提醒。下載這個文件，而後，把他放到一個顯眼的地方；而後， webstorm 點擊文件 -- 導入設置，找到這個下載的文件，點擊肯定便可。

　　以上就是webstorm支持小程序語法的操做。

5、基礎文件目錄詳解

　　而後解釋一下小程序的目錄結構。

　　　　project.config.json: 小程序的配置文件，包含項目打包配置、上傳代碼自動壓縮等等，是一些開發、打包之類的配置。

　　　　app.json: 當前項目的配置文件。包括項目的頁面引入、導航條顏色、導航條標題等等，是項目具體到代碼開發上的配置。介紹幾個配置：

　　　　　　　　pages：包含的頁面。每次新增頁面都得在這裏引入，不然新頁面的json配置等沒法生效。注意pages中頁面先寫的先渲染，因此數組第一條也就是咱們的首頁。

　　　　　　　　window：配置全部頁面導航條字體、顏色、背景色等

　　　　app.js: 小程序入口文件。生成小程序實例，App({}), 一般在這獲取用戶信息、受權信息、定義全局變量等。

　　　　app.wxss: 小程序全局 style 文件。對整個項目頁面生效。一般規定項目的字體、基礎顏色，定義一些公共樣式。

　　　　utils: 工具函數目錄。一般用來放一些公共的js方法。好比封裝的request請求，一些別的處理數據什麼的方法。

　　　　pages: 小程序的頁面目錄。全部的小程序頁面，都寫在這裏面。

6、完善項目目錄

　　上邊大體解釋了一下小程序的基礎文件，如今按照常見的規範完善一下項目目錄，這裏麪包含一些我的看法，有須要的參考便可。先看一下結果：

　　如今解釋一下這些目錄：

　　　　components：咱們封裝的小程序可複用組件。

　　　　constants：一些項目中的常亮。

　　　　image：用到的圖片。

　　　　services：用到的全部接口目錄

　　大體就新建了這幾個，若是有別的需求，根據本身的狀況增長。

7、基礎語法詳解

　　如今大體解釋一下小程序的語法。首先，建立新頁面，默認都建立 *.wxml *.wxss *.js *.json 和咱們平時寫的代碼差很少，都是html js css，多了個json配置文件

　　　　*.json：經常使用的屬性有2大塊，navigationBarTitleText 相關的設置頂部標題的， usingComponents 引用的組件

　　　　*.js： getApp() 獲取小程序實例，拿全局變量等； Page({}) 建立頁面； data 當前頁面的變量；onLoad 生命週期，頁面加載完畢。

　　　　*.wxml：注意，小程序支持的標籤不多，像 span 是支持的，div不支持，通常用view代替塊級，span、text 代替行級。

　　　　*.wxss：大部分css選擇器不支持，支持的好像才5個，想支持less等得本身配置

// json文件
{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText":"個人",
  "usingComponents": {
    "menu": "/components/menu/index"
  }
}

// js文件
const app = getApp()
Page({
  data: {},
  
  onLoad: function () {},

})

8、實現頁面跳轉

　　和一般的web開發同樣，小程序頁面跳轉頁分2中，wxml中的vavigator標籤，以及js的navigator相關的api。路由跳轉的方法有好幾個，這裏不一一贅述了，經常使用的直接跳轉

wx.navigateTo，重定向 wx.redirectTo等等，具體的請看官方文檔。這裏強調一下路由傳參，很簡單：
一、少許數據。直接問號傳參。而後在目標頁面的onLoad方法中經過options參數接收。
二、大量數據。直接塞到全局變量裏面。

// wxml跳轉頁面
<navigator url="/pages/my{{item.path}}" class="navigator">
      <image class="imgIcon" src="{{item.icon}}"></image>
      <view class="navigator-text" data-id="{{item.key}}" bindtap="handleMenuTap">{{item.name}}</view>
 </navigator>

//js跳轉頁面
wx.navigateTo({
      url: `/pages/my/appointDetail/index?_id=${this.data.marker.id}`
    })

//路由傳參如何接收

onLoad: function (options) {

　　 console.log(options)

9、wx.request 的封裝

　　在utils中新建request.js，簡單封裝了一下，一些數據要全局配置的都引進來，而後作了些錯誤的統一處理，沒什麼難度，不過要特別注意一下cookie的攜帶。具體代碼以下：

const app = getApp()
export default function request(url, options = {}) {
  return new Promise(function (resolve, reject) {
    wx.request({
      url: `${app.origin}${url}`,
      method: 'GET',
      ...options,
      data: options.data,
      header: {
        'content-type': 'application/json',
        'cookie': wx.getStorageSync("cookie")
      },
      success: function (res) {
        //從新受權登陸
        if (res.statusCode === 401){
          wx.redirectTo({url: '/pages/login/index'})
          return
        }else if (res.statusCode !== 200) {
          reject({ error: '服務器忙，請稍後重試', code: 500 });
          return
        } else {
          if (url === '/api/cdz/user/weixin/login') {
            const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
　　　　　　　　
            if (cookie) wx.setStorageSync("cookie", cookie);
          }
          resolve(res.data);
        }
      },
      fail: function (res) {
        // fail調用接口失敗
        if (url === '/api/cdz/user/weixin/login') {
          const cookie = res.header["set-cookie"] || res.header["Set-Cookie"];
          if (cookie) wx.setStorageSync("cookie", cookie);
        }
        reject({ error: '網絡錯誤', code: 0 });
      }
    })
  })
}

　　而後咱們使用的時候直接使用封裝好的request方法，這樣全部的api就封裝成一個個函數。咱們在頁面中直接import引入調用便可。

import request from "../utils/request";
import { stringify } from "../utils/util"

export function testPost(data) {
  return request(`/api/test/post`, {
    method: 'PUT',
    data,
  })
}

export function testGet(data) {
  return request(`/api/test/get`)
}

10、使用 npm （引入 weui、moment等插件）

　　由於小程序使用的是不完整的瀏覽器對象，因此不少js包都是很差使的，好比jquery之類的。因此npm基本是廢了，能用的依賴包不多，具體哪些能用得本身發掘了。這裏仍是要介紹一下小程序如何使用npm，畢竟有些包仍是要用的。

　　一、打開微信開發者工具 -- 點擊詳情 -- 勾選使用npm模塊

　　二、打開命令行，進入項目的根目錄下， npm init 初始化npm

　　三、npm i 。。。安裝你須要的依賴

　　四、打開微信開發者工具 -- 點擊工具 -- 點擊構建npm。此時小程序會將 node_modules 文件編譯打包，生成新目錄 miniprogram_npm ，

　　五、在須要用到的頁面的js文件中，const moment= require('moment') 引入，直接使用便可

　　六、最後記得忽略文件。新建 .gitignore 文件，node_modules 、 package_lock.json 等文件不須要上傳，最好只保留小程序的npm構建包，用什麼依賴也是的那個下載。這個到不是必須的

　　ps: 特殊注意一下weui的引入，這個ui庫是純css的，沒有js文件，因此他無法用npm引入，而是直接下載文件，我直接丟到根目錄下，而後在 app.wxss 文件的開頭引入