前言

相信很多人對微信小程序都比較情有獨鍾，首先大家應該知道小程序的優點，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

歷史

從2016/9/21微信小程序發展以來發生了千變萬化的變化，在此過程中增加了

支付寶小程序（2017-09-20）
頭條小程序（2018-09-16）
百度小程序（2018-07）
QQ小程序（2019-06）
但生活中用的最多的還屬微信小程序，微信小程序提供了一個簡單、高效的應用開發框架和豐富的組件及API，幫助開發者在微信中開發具有原生 APP 體驗的服務。

配置小程序

全局配置app.json中配置相當於vue中的路由
直接在pages選項中寫頁面路徑，即可創建相應的頁面

{
  "pages": [
    "pages/kind/kind",
    "pages/home/home",
    "pages/cart/cart",
    "pages/user/user",
    "pages/details/details",
    "pages/map/map"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "樂購",
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark",
    "backgroundColorTop": "#0f0",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#efefef",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首頁",
        "iconPath": "resources/home.png",
        "selectedIconPath": "resources/home_active.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分類",
        "iconPath": "resources/kind.png",
        "selectedIconPath": "resources/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "購物車",
        "iconPath": "resources/cart.png",
        "selectedIconPath": "resources/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "resources/user.png",
        "selectedIconPath": "resources/user_active.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 6000,
    "connectSocket": 6000,
    "uploadFile": 6000,
    "downloadFile": 6000
  },
  "permission": {
    "scope.userLocation": {
      "desc": "允許定位你的地理位置"
    }
  },
  "navigateToMiniProgramAppIdList": [
    "wx5dfe0dd623d5ae6b"
  ],
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "debug": false
}

在這裏的sitemap.json爲文件，主要用於配置小程序及其頁面是否允許被微信索引，文件內容爲一個 JSON 對象，如果沒有 sitemap.json ，則默認爲所有頁面都允許被索引。

頁面配置pages文件中子文件配置各個頁面
配置局部樣式

{
  "navigationBarBackgroundColor": "#ff7001",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "樂購-首頁",
  "backgroundColorTop": "#efefef",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50,
  "disableScroll": false,
  "usingComponents": {
    "prolist": "/components/prolist/prolist"//子組件引入路徑
  }
}

這裏的js文件主要用於處理頁面的初始數據、生命週期回調、事件處理函數等。

Page({

  /**
   * 頁面的初始數據
   * data 是頁面第一次渲染使用的初始數據。
   * 頁面加載時，data 將會以JSON字符串的形式由邏輯層傳至渲染層，因此data中的數據必須是可以轉成JSON的類型：字符串，數字，布爾值，對象，數組。
   * 渲染層可以通過 WXML 對數據進行綁定。
   */
  data: {

  },

  /**
   * 生命週期函數--監聽頁面加載
   * 頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。
   */
  onLoad: function (options) {
    // options爲打開當前頁面路徑中的參數
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   * 頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   *  頁面顯示/切入前臺時觸發
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   * 頁面隱藏/切入後臺時觸發
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   * 頁面卸載時觸發。
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   * 需要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
   * 可以通過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
   * 當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   * 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
   * 在觸發距離內滑動期間，本事件只會被觸發一次
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    // 自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123',
      imageUrl: ''
    }
  },

  /**
   * 監聽用戶滑動頁面事件
   */
  onPageScroll: function () {

  }
  /**
   * 自定義函數
   */
})

如果在全局app.js文件中設置一些全局數據，如：獲取設備的基本信息

//app.js
App({
  onLaunch: function () {
    //獲取設備的基本信息
    this.getDeviceInfoFn()
  },
  getDeviceInfoFn() {
    wx.getSystemInfo({
      success: (res) => {
        console.log(res)
        // 修改全局變量數據
        this.globalData.deviceinfo = res
      }
    })
  },
  globalData: {
    userInfo: null,
    deviceinfo:null//設置一個全局設備信息變量接受
  },

在局部js文件中需 const app = getApp(); console.log(app)
//解構賦值
const {globalData:{deviceinfo:{screenWidth,screenHeight}}} = app
來獲取全局js中的數據

發送異步請求

建議使用es6的模塊化方法，api中提供的是基於commonjs規範的exports以及require語法
定義工具模塊 utils/index.js

// 接口地址 
const baseUrl = '接口地址'
//暴露全局方法
export function request(options){
  //解構賦值
  const {url,data}=options;
  wx.showLoading({
    title: '加載中',
  })
  // 回調函數、promise、generator + yield、async+await
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      data: data || {},
      success: (res) => {
        // 異步操作成功調用resolve
        resolve(res)
      },
      fail: (err) => {
        // 異步操作失敗調用reject
        reject(err)
      },
      complete: () => {
        // 成功失敗都取消刷新
        wx.hideLoading()
      }
    })
  })
}

小程序中的常用組件

首頁輪播圖數據的請求以及渲染

<swiper
  indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" 
  duration="{{500}}">
  <block wx:for="{{bannerlist}}" wx:key="index">
    <swiper-item >
      <image src="{{'http://.....kuboy.top' + item}}"></image>
    </swiper-item>
  </block>
</swiper>
<prolist></prolist>//子組件調用

indicator-dots:是否顯示面板指示點 autoplay:是否自動切換 circular:是否採用銜接滑動
duration:滑動動畫時長這些都是常用的方法，具體其它方法可以參考文檔

<map 
  class="map" 
  longitude="{{longitude}}" 
  latitude="{{latitude}}"
  scale="15"
  markers="{{markers}}"
  controls="{{controls}}"
  bindcontroltap="controlshandler"//自定義點擊事件
  ></map>
  //獲取經緯度
  data: {
    longitude: '118.8205719000', // 經度
    latitude: "31.8839713500", // 維度
    markers: [{
      id: 1, //marker 點擊事件回調會返回此 id
      longitude: '118.8205719000', // 經度
      latitude: "31.8839713500", // 維度
      title: '寶塔鎮河妖', // 點擊marker提示信息callout出現時忽略
      iconPath: '/resources/zuobiao.png', 
      width: 40,
      height: 40,
      callout: {
        content: '寶塔鎮河妖',
        color: '#f66',
        fontSize: 14,
        borderRadius: 5,
        borderWidth: 3,
        bgColor: 'white',
        padding: 10,
        display: 'BYCLICK', //  'BYCLICK': 點擊顯示; 'ALWAYS': 常顯
        textAlign: 'center'
      }
    }],
    controls: [{//controls爲地圖上顯示控件，控件不隨着地圖移動
      id: 1,
      position: { // left,top
        left: screenWidth-70,  // 獲取設備的寬度以及高度 ---  獲取設備的基本信息
        top: screenHeight - 150,
        width: 40,
        height: 40
      },
      iconPath: '/resources/xingzhuang.png',
      clickable: true // 控制默認不可以點擊
    }]
  },
  //自定義點擊事件
  controlshandler(event) {
    console.log(event)
    //判斷是否點擊的定位按鈕的id號
    if (event.controlId === 1) {
      //調用獲取當前經緯度
      wx.getLocation({
        success: (res) => {
          console.log(res)
          //解構賦值
          const {longitude,latitude} = res
          this.setData({
            longitude, latitude,
            markers: [{
              id: 1, //marker 點擊事件回調會返回此 id
              longitude: longitude, // 經度
              latitude: latitude, // 維度
              title: '寶塔鎮河妖', // 點擊marker提示信息callout出現時忽略
              iconPath: '/resources/zuobiao.png', 
              width: 40,
              height: 40,
              callout: {
                content: '寶塔鎮河妖',
                color: '#f66',
                fontSize: 14,
                borderRadius: 5,
                borderWidth: 3,
                bgColor: 'white',
                padding: 10,
                display: 'BYCLICK', //  'BYCLICK': 點擊顯示; 'ALWAYS': 常顯
                textAlign: 'center'
              }
            }]
          })
        }
      })
    }
  },

map方法比較多，具體詳情可以參考相關文檔
 小程序的定位相關api

小程序中的組件通信

逆戰中爲了美化wxml頁面佈局減少父組件的js代碼量，一般都是傳遞給子組件

//在js文件中獲取數據
 data: {
    bannerlist:[],//異步請求獲取的數據
    reachbottom:false
  },
//在wxml中調用組件中傳值
<prolist prolist="{{prolist}}"/>
//在子組件中接受
properties: {
    prolist: Array//接受的數據類型
  },

以上只是接觸小程序以後的一部分理解，還有好多好多，隨着小程序的越來越成熟也誕生了別的框架可以處理頁面需求如：Taro、uni-app等
生活是一張潔白的畫紙，我們每個人都是手握各色畫筆的畫師，生活是一杯香醇的美酒，我們每個人都是一名出色的品酒師，生活是一塊神奇的土地，我們每個人都是辛勤耕耘的勞動者，生活更是一條看不見盡頭的長路，我們每個人都是生活的遠足者。

對微信小程序的理解

前言

歷史

配置小程序

發送異步請求

小程序中的常用組件

小程序中的組件通信

vue基礎入門探討

vue中slot和v-slot使用

對微信小程序的理解

vue中的組件通信和vuex

vue中實現swiper組件

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結