微信小程序知識點(二)

原創

2020-02-22 16:44

從開始做小程序到目前爲止，已經將近二十天了。一開始我的小程序只有簡簡單單的crud，以至於上線的時候我朋友說這麼簡單有什麼用？於是自己計劃設計六個功能出來，分別是新聞、星座、音樂、笑話、天氣、駕校考題，接口全部是調用聚合接口：https://www.juhe.cn/，大家可以自己去這個網站上註冊並申請免費接口，接口每天只有一百次調用的機會，要注意珍惜！
我按照順序依次講下我在做的時候遇到的哪些困難。
在設計星座的時候給星座設計多選框的時候，我選擇了小程序picker這個組件，效果如下：

這個組件究竟是怎麼個玩法，我到現在還沒有搞得特別明白，但是當時在做的時候最讓我頭疼的時候獲取對應參數。我在控制檯打印，他每次返回的都是數組下標，卻獲取不到對應的文字參數，我去網上百度了一大堆，後來在一篇博客裏看到了解決方法。其實他這裏是通過數組下標獲取到了對應文字，後來想想倒還真不值一提了。

data: {
    array: ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座', '處女座', '天秤座', '天蠍座', '射手座', '摩羯座', '水瓶座', '雙魚座'],
    index: 0,
    alldata: {},
    imgdata: ''
  },
  bindPickerChange: function(e) {
    var that = this;
    this.setData({
      index: e.detail.value
    })
    console.log(this.data.array[e.detail.value]);
    var consname = this.data.array[e.detail.value];

音樂組件用的是audio，這個組件現在已經被微信官方放棄了，但是新的api本人還沒有去研究，所以這裏不做介紹。不過在獲取音樂的URL的時候自己遇到了一個拼接字符串問題，我後來又在另一篇博客裏簡單說了一下。https://blog.csdn.net/Curtisjia/article/details/102995247，雖然看着很簡單但是自己做的時候就沒有想到，Java基礎還是十分的薄弱的，後面還是會好好複習的。
至於天氣的預報只是最簡單的數據渲染而已，唯一的缺點就是地址是我寫死的，後面可能會調取定位的接口來完善這個功能。
做笑話這個功能的時候，第一問題就是如何獲取當前時間絕對秒，因爲這個接口需要這個參數，當然我還是百度了，最後在一篇博客裏找到了方法。

    @ResponseBody
    @RequestMapping(value = "/sentTimeStamp",method = RequestMethod.GET)
    public Map<String,Object> sentTimeStamp(){
        Map<String,Object> map=new HashMap<>();
        //https://blog.csdn.net/lin_dianwei/article/details/54616014
        long timeStampSec = System.currentTimeMillis()/1000;
        String timestamp = String.format("%010d", timeStampSec);
        log.info(timestamp);//獲取當前絕對秒
        map.put("timestampSec",timestamp);
        return map;
    }

接着就是分頁了，本來我是想着做個上一頁下一頁這樣的，後來想想還是算了，下拉刷新他不香嗎？你也不要問我怎麼做？我這裏所有列出來的點全部都是我自己百度的，要不然怎麼說是面向百度編程？小程序onPullDownRefresh方法裏寫方法，不過這裏面當時困擾了我兩三個小時的就是怎麼給page+1，我記得我一開始是這麼寫的var page=1;page=page++;當然他是有問題的，因爲在函數裏面定義了一個初始值，所以每次執行的時候都增加不了。所以我又去開始大面積百度了，終於讓我找到了方法。首先在全局裏面定義一個js的全局裏面定義一個page，然後在函數裏面寫page=page+1再後面的代碼就直接複製粘貼了，懶得寫了

onPullDownRefresh: function() {
    // 顯示頂部刷新圖標
    wx.showNavigationBarLoading();
    page = page + 1;
    console.log('page:' + page);
    wx.request({
      url: 'http://v.juhe.cn/joke/content/list.php?sort=desc&page=' + page + '&pagesize=10&time=' + this.data.timestampSec + '&key=7993d189bad45a539efdfdd117e228f8',
      method: "GET",
      success: e => {
        console.log(e.data.result.data);
        this.setData({
          laughStories: e.data.result.data
        })
        // 隱藏導航欄加載框
        wx.hideNavigationBarLoading();
        // 停止下拉動作
        wx.stopPullDownRefresh();
      }
    })
  },

駕校考題這裏與後臺沒有一點關係，就是直接調用接口然後渲染到頁面上，但是有幾個難點，第一個就是又用到這該死的picker組件，只不過這次不是單列了而是雙列，官網上有一個三列的例子，不過我沒研究透，而且我這裏的功能沒有做好，官網上的有個動態變化選項，我這裏沒有做，我這裏輪轉到科目四時，右邊應該是空，我還沒有實現出來，後面會進行更改。

當然如何通過下標獲取對應的參數同樣成了我的問題，我定義了一個新的二維數組裏面放了我需要的參數，然後就開始了我漫漫嘗試的道路。反正最終是試出來了。
然後就是隱藏radio，因爲返回的數據有的是判斷題，只有兩個選項，本地這邊有四個radio，所以當有的item爲空的是，需要把radio隱藏起來。我想到了條件渲染。<radio class="radio" value="3" hidden="{{flag ?item.item3=='':item.item3!=null}}">在data那邊默認flag：true，然後用三目運算符進行判斷。
之後是對答案的正確判斷，這裏我的思路是把answer用data-的方法放到radio的函數裏，然後獲取就是用e.target.dataset.answer獲取，判斷的方法太簡單我就不說了。

博客寫着寫着，發現自己小程序又出現問題，這是剛剛發現的，控制檯上報500錯誤VM394:1 Failed to load local image resource /pages/jiacheexam/ the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error)很奇怪，我這個功能並不涉及後臺，而且我圖片渲染也沒有出現問題，病因在哪我一時半會找不到，百度了幾個例子，說可能是圖片渲染的時候路徑出現了問題，又要百度了。

未完待續。。。