自用Wepy開發微信小程式的小手冊

李二狗子發表於2018-10-29
微信小程式

前言

最近老年痴呆了，學了就忘，自學自記自用手冊：）

一、	介紹wepy
二、	vscode 使用 wepy的小技巧
三、	微信開發者工具使用說明
四、	使用wepy開發微信小程式
五、	wepy的躺坑之路
複製程式碼

[demo 地址]：github

一、介紹wepy

自用Wepy開發微信小程式的小手冊
ps:每個框架各有其優缺點，哪個用著爽就行。 附上文件地址

1. 怎麼使用wepy

  • 安裝node

  • 全域性安裝或更新WePY命令列工具

    npm install wepy-cli -g

  • 生成demo工具，可以先使用wepy list檢視模板以空模版為例 如需使用已有的模板可以直接敲命令列

自用Wepy開發微信小程式的小手冊
wepy init empty myDemo

  • 此處注意專案名字不能大寫，一路回車最後剎車

    自用Wepy開發微信小程式的小手冊
    這個語法監測有強迫症的慎點
    自用Wepy開發微信小程式的小手冊

  • 切換至專案目錄

  • 安裝依賴包

    npm i

  • 專案生成後是這樣的

    除了沒有dist其他都有

    自用Wepy開發微信小程式的小手冊

至此我們的第一個wepy小程式專案構建完成。

二、 vscode 使用 wepy的小技巧

1. vscode使用wpy語法高亮配置

首選項-應用程式-setting.json加上如下程式碼，重啟就ok
"files.associations": {
    "*.vue": "vue",
    "*.wpy": "vue",
    "*.wxml": "html",
    "*.wxss": "css"
},
"emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
}
複製程式碼

這裡附上其他編譯器的高亮配置：點我

2. 關於wepy的一些外掛

自用Wepy開發微信小程式的小手冊

自用Wepy開發微信小程式的小手冊

3. 開啟實時編譯功能

直接在vscode中開啟myDemo的終端，輸入指令： Npm run dev 此時才會生成dist資料夾
Ps：啟動時會如果剛才關閉了ESLint此時會報警告,進入wepy.congig.js 中設定eslint為false重跑指令就行了。這樣會生成一個dist資料夾，如果想實時預覽就必須用到微信開發者工具了，開啟開發者工具-進入到myDemo專案的dist資料夾就可以看到專案了。

三、微信開發者工具使用

1. 使用微信開發者工具-->新增專案，專案目錄請選擇dist目錄。
2. 微信開發者工具-->專案-->關閉ES6轉ES5。 重要：漏掉此項會執行報錯。
3. 微信開發者工具-->專案-->關閉上傳程式碼時樣式自動補全。 重要：某些情況下漏掉此項也會執行報錯。 4. 微信開發者工具-->專案-->關閉程式碼壓縮上傳。 重要：開啟後，會導致真機computed, props.sync 等等屬性失效。

四、使用wepy開發微信小程式

1. 接下來我們應該應該做一個小小的demo,目錄結構如下

自用Wepy開發微信小程式的小手冊

2.先把資料夾構建起來，需要的圖片材料塞進去。
3.配置入口檔案 app.wpy
小程式的全域性配置均在此配置

config = {
    pages: [
      'pages/index',//首頁
      'pages/find',//發現頁
      'pages/my',//個人中心
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: '#ccc',
      backgroundColor: '#ffffff',
      selectedColor: '#1296db',
      borderStyle:'white',
      list: [
        {
          text: '首頁',
          pagePath: 'pages/index',
          iconPath: 'images/home.png',
          selectedIconPath: 'images/home_sel.png'
        },
        {
          text: '發現',
          pagePath: 'pages/find',
          iconPath: 'images/find.png',
          selectedIconPath: 'images/find_sel.png'
        },
        {
          text: '個人中心',
          pagePath: 'pages/my',
          iconPath: 'images/my.png',
          selectedIconPath: 'images/my_sel.png'
        }
      ]
    }
  }
  globalData = {};//全域性資料
  onLaunch() {
    console.log('on launch')
  }
}
複製程式碼

配置好後到開發者工具中看到報錯

如圖發現是find和 my頁面還是空頁面，我們進去寫點什麼。。。

4. 配置好了，完美執行

自用Wepy開發微信小程式的小手冊

5. 寫個搜尋的元件

其實和vue差不多吧，雖然我沒用過vue，父子元件之間傳值都是props 和 $emit。後面會附上程式碼，大家不要方。

<!--componont下的search元件-->
<template>
    <view class="search">
        <view class="main">
            <view class="content">
                <view class="icon-search iconfont icon"></view>
                <input placeholder="大家都在搜  {{title}}" bindinput="bindKeyInput"/>
                <view class="text" @tap="search()">搜尋</view>
            </view>
        </view>
    </view>
</template>
<script>
import wepy from 'wepy';

export default class search extends wepy.component {
    data = {
        inputValue: ''
    }
    props = {
        title: String,
    }
    methods = {
        //搜尋按鈕
        search(){
            console.log('1111', this.inputValue);
            this.$emit('searchFn', this.inputValue);
        },
        //輸入字元
        bindKeyInput(e){
            this.inputValue =  e.detail.value;
            console.log('2222', this.inputValue);
            this.$apply();
        }
    }
}
</script>
複製程式碼

之後直接在父元件中import就行了

<!--index父元件-->
<style lang="less">

</style>
<template>
  <view class="container">
    <search :title="searchTitle" @searchFn.user="opertionFn"></search>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import search from '../components/search';

  export default class Index extends wepy.page {
     config = {
      navigationBarTitleText: '李二狗首頁',
    }
    components = {
      search: search   
    }
    data ={
      searchTitle: '李二狗'
    }
    methods = {
      //搜尋
     opertionFn(data, evt){
        console.log('operation');
        console.log(data);
    },
    }
    onLoad() {
      console.log('onLoad')
    }
  }
</script>
複製程式碼

帶元件的首頁就完成了

自用Wepy開發微信小程式的小手冊

7. 介紹下里面的資料請求wxReques.js

  • 自己封裝好了資料請求
import wepy from 'wepy';
import util from './util';
import tip from './tip'
const API_SECRET_KEY = 'null'
const TIMESTAMP = util.getCurrentTime()
const SIGN = TIMESTAMP + API_SECRET_KEY

const wxRequest = async(params = {}, url) => {
    tip.loading();
    let data = params.query || {};
    let header = { 
        'Content-Type': 'application/json',
        'cookie': wepy.getStorageSync('sessionid')
    } || {}
    data.sign = SIGN;
    data.time = TIMESTAMP;
    let res = await wepy.request({
        url: url,
        method: params.method || 'GET',
        data: data,
        header: header,
    });
    tip.loaded();
    return res;
};

module.exports = {
    wxRequest
}
複製程式碼
* 這裡必須提一下微信設定cookie的方法： 
登入請求回來之後,通過wx.setStorageSync讀取儲存res的header的cookie：
wx.setStorageSync("sessionid", res.header["Set-Cookie"])
在header頭部取得：
wepy.getStorageSync('sessionid')
複製程式碼
  • 回到api.js --在api.js中集中請求
import {
    wxRequest
  } from '../utils/wxRequest';

  const baseUrl = 'https://baidu.com/'
  //微信的jscode換取sessionKey
  const loginApi = (params) => wxRequest(params, baseUrl + "/api");
  //微信小程式列表
  const list = (params) =>  wxRequest(params,baseUrl+"/api/list")
  export default {
    loginApi,
    list
  }
複製程式碼
  • 最後直接在頁面中呼叫

自用Wepy開發微信小程式的小手冊

先寫這麼多，未完待續。。。

五、 wepy的躺坑之路

暫時先放著有時間再補。

相關文章