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

前言

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

1、	介紹wepy
2、	vscode 使用 wepy的小技巧
3、	微信開發者工具使用說明
4、	使用wepy開發微信小程序
5、	wepy的躺坑之路
複製代碼

[demo 地址]：github

1、介紹wepy

ps:每一個框架各有其優缺點，哪一個用着爽就行。 附上文檔地址

1. 怎麼使用wepy

• 安裝node

• 全局安裝或更新WePY命令行工具

  npm install wepy-cli -g

• 生成demo工具，能夠先使用wepy list查看模板以空模版爲例 如需使用已有的模板能夠直接敲命令行

wepy init empty myDemo

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

  

  這個語法監測有強迫症的慎點

  

• 切換至項目目錄

• 安裝依賴包

  npm i

• 項目生成後是這樣的

  除了沒有dist其餘都有

  

至此咱們的第一個wepy小程序項目構建完成。

---

2、 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的一些插件

3. 開啓實時編譯功能

直接在vscode中打開myDemo的終端，輸入指令： Npm run dev 此時纔會生成dist文件夾
Ps：啓動時會若是剛纔關閉了ESLint此時會報警告,進入wepy.congig.js 中設置eslint爲false重跑指令就好了。這樣會生成一個dist文件夾，若是想實時預覽就必須用到微信開發者工具了，打開開發者工具-進入到myDemo項目的dist文件夾就能夠看到項目了。

3、微信開發者工具使用

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

4、使用wepy開發微信小程序

1. 接下來咱們應該應該作一個小小的demo,目錄結構以下

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. 配置好了，完美運行

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>
複製代碼

帶組件的首頁就完成了

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
  }
複製代碼

• 最後直接在頁面中調用

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

5、 wepy的躺坑之路

暫時先放着有時間再補。