1. 程式人生 > >微信小程式初踩坑

微信小程式初踩坑

剛開始接觸微信小程式,有一點做網站的基礎,會點前端和js,下面是踩坑記錄

  1. tabBar按鈕 1.1 tabBar不要拼錯了,之前有拼成toolbar,不要搞混了 1.2 tabBar上使用到的頁面都要在app.jon中註冊

  2. 展示資料 wx:for迴圈顯示js的資料

    Page({

    /** * 頁面的初始資料 */ data: { title: ‘’, movies: [], loading: true, items: [ //第一首 { name: ‘I Am You’, author: ‘Kim Taylor’, image: ‘http://localhost:61174/image/1.jpg’, //src: ‘/content/image/course/Kim Taylor - I Am You.mp3’, action: ‘pause’, }, //第二首 { name: ‘Just As I Am’, author: ‘Air Supply’, image: ‘

    http://localhost:61174/image/4.jpg’, //src: ‘/content/image/course/Air Supply - Just As I Am - Digitally Remastered 1999.mp3’, action: ‘pause’, }, //第三首 { name: ‘追夢人’, author: ‘群星-輕音樂’, image: ‘http://localhost:61174/image/5.jpg’, //src: ‘/content/image/course/群星 - 追夢人.mp3’, action: ‘pause’, }, //第肆首 { name: ‘七月上’, author: ‘Jam’, image: ‘/content/image/course/1.jpg’, //src: ‘
    http://xxx.xxx.xxx.xxx/image/course/Jam
    - 七月上.mp3’, action: ‘pause’, }, //第伍首 { name: ‘一個日本歌’, author: ‘WANDS’, image: ‘/content/image/course/1.jpg’, //src: ‘/content/image/course/WANDS - 世界が終わるまでは….mp3’, action: ‘pause’, } ] })

    然後在wxml上

    <scroll-view scroll-y=“true” class=“meta” wx:for="{{items}}"wx:for-index="index"wx:for-item=“item”>

    我是課程簡介 時間:2018-11-11 {{item.author}}

  3. wx.request 獲取網路資料,動態顯示在頁面上

    onLoad: function (options) { var that = this; wx.request({ url: ‘http://localhost:61174/Default/GetData’, method: ‘Get’, dataType :“json”, success: function (res) { that.setData({ items : res.data.obj }) }, fail: function (res) { console.log(res); console.log(“資料獲取失敗”); } }) } 在除錯的時候使用http://localhost:61174這樣的地址的話,需要在 設定-專案設定 中把“不校驗合法域名、web-view(業務域名)、TLS 版本以及 HTTPS 證書”勾選上