碼上快樂

相關內容    簡體    繁體

前端菜鳥的小程序摸索記錄

本文轉載自   查看原文   2019-03-26 23:10   723    web/ JS/ js

一文摸摸小程序的底

寫在前面的話：算不了入門教程，只能算這幾晚的摸索教程，下次會出一篇一文入門小程序

本文示例源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base

在線瀏覽：https://github.lesschina.com/js/5.wechat/1.小程序摸索.html

1.屁話一籮筐

有些同志留言說我消失了，文章更新頻率比以前慢多了？我這邊先統一回復一下：

最近這幾個月利用空閑時間把三國讀完了（咳，別問我為什么讀，就是突然想讀了）

PS：有空聊聊唄~

然后最近兩個星期迷上了讀書，回頭可能會發點讀書筆記，推薦幾本不錯的書給大家

然后就是上次發文，修復Shopee上傳限制的時候使用了下JQ來快速實現

PS：說到底還是個后端偏數據方向的，也就JQ還記得。。。

然后本着專研的精神，又把H5復習了一下

PS：幾年前曾經在舊博客寫過H5的讀書筆記

本來准備找下思維導圖快速過下的，之后發現。。。當時懶了一下，只是發圖，所以。。丟包了。。。

PS：於是最近幾天閑暇之余W3C逛的比較多

然后先是改寫了上次的腳本，再寫了H5的markdown草稿

PS：過幾天你們應該可以看到了，咳，人老了~容易疲勞。。讓我先緩緩。。先緩緩

然后專研的毛病又來了，草稿寫到導航和多媒體的時候想用小程序試試，畢竟現在是小程序的天下了

PS：之前前給親戚弄小程序的時候研究了1個晚上，發現不是很難，然后現在想到了

然后發現~前端的東西的確不難，但是我這人有個毛病：喜歡追求頁面的美感。。

於是發現。。demo幾分鍾搞定了，為了調個漂亮樣式卻耗去幾小時。。。

PS：本來今天可以早點休息的，於是乎~陪大家熬個夜吧。。。

2.記錄點小程序功能點

我用的不多，簡單引入一下，小程序API用起來很簡單的，更全的可以去官方查看

PS：唉，還是Python官方文檔最省心啊~

話說，以后還是老老實實先把上面幾個系列文章清了再說吧~

PS：清了以后，我還會回來的~

2.1.前言

小程序|公眾號登錄注冊頁面：https://mp.weixin.qq.com/

這個太簡單，就不浪費時間了，貼個官方教程：https://developers.weixin.qq.com/miniprogram/dev/#申請帳號

下載開發工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新建個簡單項目：
1.創建小程序.png

項目基本配置：一般在詳細里面改就行了
2.配置文件.png

文件簡單介紹：（圖說的很清楚了）
3.文件介紹.png

PS：用法和css一樣，在小程序中像素單位全部用rpx（類似於rem）

rpx: 可以根據屏幕寬度進行自適應，文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

PS：小程序支持的標簽：https://developers.weixin.qq.com/miniprogram/dev/component/

下面開始就記錄下遇到的小技術點：

2.2.頁面初始數據的使用

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/1data

2.2.1.獲取

在頁面的data中定義了幾個字段：
3.data.png

想在頁面中顯示只需要寫成{{xxx}}即可
3.渲染.png

PS：你每次保存，左邊都會有預覽的

{{xxx}}也可以在樣式和屬性中哦~（wxss和css用法一樣）

貼下demo：（支持的標簽看官方文檔即可）

<!--index.wxml-->
<view class='container'>
  <view class='{{my_class}}'>{{name}}</view>
  <view>{{age}}</view>
  <view>{{work.name}}</view>
  <view>{{work.location}}</view>
</view>

腳本：（支持ES6語法）

//index.js
Page({
  data: {
    name: "小明",
    age: 23,
    work: {
      "name": "微軟",
      "location": "中國"
    },
    my_class: "red"
  },
  onLoad: function() {
    console.log("頁面加載完成");
  }
})

樣式：

/* index.wxss */
view {
  padding: 10rpx;
}

.red {
  color: red;
}

效果演示：
3.渲染2.png

2.2.2.設置

知識點：

  • 獲取：this.data.xxx
  • 設置：this.setData({xxx:xx})
  • 綁定事件：在標簽中添加bindtap="自定義方法"屬性

來個修改頁面初始數據的案例：（官方說先修改js中的值，然后異步修改頁面中的值）

<!--index.wxml-->
<view class='container'>
  <view class='{{my_class}}'>{{name}}</view>
  <view>{{age}}</view>
  <view>{{work.name}}</view>
  <view>{{work.location}}</view>
  <button bindtap='update_info'>點我就修改</button>
</view>

腳本文件：

//index.js
Page({
  data: {
    name: "小明",
    age: 23,
    work: {
      "name": "微軟",
      "location": "中國"
    },
    my_class: "red"
  },
  onLoad: function() {
    console.log("頁面加載完成");
  },
  // 自定義方法  // look：新增內容
  update_info: function() {
    // this對象經常容易變，我一般都存一份
    var that = this;
    // 后台獲取data里的值
    console.log(that.data.name, that.data.age)
    // 修改data(直接賦值沒用)
    that.setData({
      age: 25,
      name: "小華",
      work: {
        "name": "蘋果",
        "location": "美國"
      }
    });
  }
})

效果展示：
3.點我修改.gif

3.彈框提醒

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/2show

知識點：wx.showToast({title:'內容',icon:'什么圖標',duration:多少毫秒})

在View中添加按鈕：

<button bindtap='show_msg1'>點我彈兩行</button>
<button bindtap='show_msg2'>點我就成功</button>

腳本中添加自定義方法：

Page({
  data: {
    title1: '你知道嗎？這是可以顯示多行的彈框提醒~\r\n你知道嗎？這是可以顯示多行的彈框提醒~\r\n你知道嗎？這是可以顯示多行的彈框提醒~',
    title2: '一二三四五六七八'
  },
  onLoad: function() {
    console.log("頁面加載完成");
  },
  // 彈框提醒
  show_msg1: function() {
    wx.showToast({
      title: this.data.title1,
      icon: 'none', // 可以顯示2行
      duration: 2000 // 默認1500
    })
  },
  // 彈框提醒
  show_msg2: function() {
    // 默認只能顯示7個中文字
    wx.showToast({
      title: this.data.title2
    })
  }
})

效果演示：（\r\n可能在PC調試的時候不換行，但是可以在手機中換行）
4.默認彈框.png
4.兩行彈框.png

4.頁面自定義屬性值

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/3data

4.1.H5的自定義屬性值

說這個之前，先普及一下H5的這方面知識：
自定義屬性：在標簽中的data-自定義屬性名（為了規范化）

  1. 獲取自定義屬性：dom.dataset.自定義屬性名 or dom.dataset["自定義屬性名"]
  2. 設置自定義屬性：dom.dataset.自定義屬性名 = xxx or dom.dataset["自定義屬性名"] = xxx
  3. 刪除自定義屬性：delete dom.dataset.自定義屬性名 or delete dom.dataset["自定義屬性名"]
  4. 一般屬性：
    • 獲取某個屬性：dom.getAttribute("屬性名")
    • 刪除某個屬性：dom.removeAttribute("屬性名")
    • 設置某個屬性：dom.setAttribute("屬性名", "值")
    • 是否包含屬性：dom.hasAttribute("屬性名")

舉個栗子：

<div class="test" data-name="mmd" data-test-one="test">自定義屬性</div>
<script>
    // 獲取標簽的自定義屬性值
    let list = document.querySelector(".test").dataset;
    // 獲取：dom.dataset.自定義屬性名（屬性名不包含`data-`)
    console.log(list.name);
    // PS：test-one名字會改成駝峰命名的變量：testOne
    console.log(list.testOne)
    // 設置：dom.dataset.自定義屬性名 = xxx or dataset[自定義屬性名] = xxx
    list.name = "小明"; // 標簽中對應值會變成小明
    list.age = 23; // 添加一個屬性
    // PS：設置為data-test-two
    list.testTwo = "test2";
</script>

輸出效果：
/h5/2019-03-16/3.h5api.png

4.2.小程序版

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

知識點：設置hover樣式：在標簽內置了hover-class="xxx"屬性

view：

<view class='container'>
  <view data-name='小張' data-age='22' bindtap='get_datas' hover-class='hover'>點我獲取data值</view>
</view>

js：（ES6語法忘記的同志可以去之前寫的一文讀懂ES6）

Page({
  data: {
    title: '獲取Data屬性的值'
  },
  onLoad: function(options) {
    // 設置標題
    wx.setNavigationBarTitle({
      title: this.data.title,
    });
  },
  get_datas: function(e) {
    console.log(e);
    let infos = e.currentTarget.dataset;
    // 顯示彈框
    wx.showToast({
      title: `Name：${infos.name}，Age：${infos.age}`, // ES6語法
      icon: 'none'
    })
  }
})

樣式：

.hover {
  color: green;
}

動態演示：
5.獲取data屬性.gif

5.小程序標題

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/wx.setNavigationBarTitle.html

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/4title

知識點：wx.setNavigationBarTitle({title:"xxx"})

view：

<view class='container'>
  <text>這是一個測試頁面</text>
</view>

js文件：

Page({
  data: {
    title: '歡迎光臨'
  },
  onLoad: function(options) {
    // 設置標題
    wx.setNavigationBarTitle({
      title: this.data.title,
    });
  }
})

效果演示：
5.標題.png

6.撥打電話

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/wx.makePhoneCall.html

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/6tel

知識點：wx.makePhoneCall({phoneNumber:"xx"})

view:

<view class='container'>
  <view hover-class='hover'>
    <text data-tel='{{tel}}' bindtap='call_tel'>{{info}}{{tel}}</text>
  </view>
</view>

js：

Page({
  data: {
    info: "客服電話：",
    tel: "95017"
  },
  onLoad: function(options) {},
  call_tel: function() {
    // 打電話
    wx.makePhoneCall({
      phoneNumber: this.data.tel
    });
  }
})

動態演示：
8.call.gif

7.圖片背景

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/5img

7.1.背景圖片

這個和html一樣，CSS3就可以實現了

wxml:

<view class='container bg'>
  <view>This is Test</view>
</view>

wxss:

.container {
  height: 1500rpx;
}

.bg {
  /* 設置背景圖片的尺寸 */
  background-size: 100% 100%; /* CSS3 */
  /* 不支持本地圖片，可以使用Base64或者允許域名下的圖片 */
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJ...省略);
}

動態展示：
7.填充頁面.gif

7.2.頁面填充

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

PS：圖片懶加載：lazy-load="true"

wxml:

<view class='container'>
  <!-- 高度自適應 -->
  <image class="bg" src="../../images/bg.jpg" mode="widthFix"></image>
</view>

wxss:

.container {
  padding: 0rpx;
}

.bg {
  width: 100%;
}

動態展示：
7.填充頁面.gif

7.3.新思路

其實很多時候都是因為height設置100%，它不生效，所以才各種樣式來調節

可以這樣設置來達到目的：設置寬度100%，高度100vh（整個屏幕默認滿屏為100vh）

PS：地圖用的比較多

擴展：

8.頁面跳轉

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/7goto

知識點：

先看一下目錄結構：
9.目錄結構.png

index頁面

<view class='container'>
  <view>
    <navigator url='{{url}}' hover-class='hover'>鏈接跳轉</navigator>
  </view>
  <view hover-class='hover' bindtap='to_page' data-url='{{url}}'>方法跳轉</view>
  <view hover-class='hover' bindtap='goto_page' data-url='{{url2}}'>帶參跳轉</view>
</view>

index腳本：

Page({
  data: {
    name: '小明',
    age: 22,
    url: '../1data/update_info',
    url2: './main'
  },
  onLoad: function(options) {

  },
  to_page: e => {
    // 頁面跳轉
    wx.navigateTo({
      url: e.currentTarget.dataset.url
    })
  },
  goto_page: function(e) {
    var that = this;
    // 頁面跳轉
    wx.navigateTo({
      url: `${e.currentTarget.dataset.url}?name=${that.data.name}&age=${that.data.age}`
    });
  }
})

main頁面：

<view class='container'>
  <view>{{name}}</view>
  <view>{{age}}</view>
</view>

main腳本：

Page({
  data: {},
  onLoad: function(pms) {
    console.log(pms);

    var that = this;
    // 設置data值
    this.setData({
      name: pms.name,
      age: pms.age
    });
  }
})

動態演示：
9.跳轉.gif

這些東西都是用API，算是比較簡單的了，就是找起來麻煩點，時間不早了，地圖這塊我再貼一個案例就先結束吧

9.地圖相關

源碼：https://github.com/lotapp/BaseCode/tree/master/javascript/5.wechat/base/pages/8map

9.1.簡單案例

知識點：

  • wx.getLocation({success:成功執行的方法,fail:失敗執行的方法})：獲取經緯度
  • wx.openLocation({latitude: 經度值, longitude: 緯度值})：顯示對應位置的地圖

wxml：

<view>
  <button bindtap='get_location'>{{demo1}}</button>
  <button bindtap='open_location'>{{demo2}}</button>
</view>

js源碼：

Page({
  data: {
    demo1: '獲取經緯',
    demo2: '打開地圖',
    lon: 120.636146,
    lat: 31.25893
  },
  onLoad: function(options) {},
  // 需要使用this的時候，最外面方法老老實實寫function()
  get_location: function() {
    var that = this;
    // 獲取經緯度
    wx.getLocation({
      // 成功的時候
      success: res => {
        console.log(res.latitude, res.longitude, res.speed, res.accuracy);
        // 更新頁面數據
        that.setData({
          lon: res.longitude,
          lat: res.latitude
        });
        // 彈框提醒
        wx.showToast({
          title: `(${res.longitude}，${res.latitude})`, // ES6語法
          icon: 'none'
        });
      },
      // 失敗的時候
      fail: ex => {
        // 彈框提醒
        wx.showToast({
          title: '定位未授權，請重新授權：\r\n刪除小程序后再打開',
          icon: 'none'
        });
      }
    });
  },
  // 打開位置
  open_location: function() {
    var that = this;
    // 打開位置
    wx.openLocation({
      latitude: that.data.lat,
      longitude: that.data.lon
    });
  }
})

簡單說下成功之后的參數含義：

  • res.longitude：經度
  • res.latitude：緯度
  • res.speed：移動速度（實時定位的時候用的多）
  • res.accuracy：精確度（一般低於50，經緯數據就偏差太多）

失敗摸擬：
10.獲取失敗.gif

成功摸擬：
10.成功獲取.gif

額外說明：需要配置一下你需要使用的權限
10.權限聲明.png

PS：授權之后，在開發的時候可以清楚狀態（現實中重新授權需要刪除小程序再打開）
10.清除狀態.png

9.2.Map組件

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

1.簡單案例擴展

先看下簡單案例的擴展：

在打開地圖的時候指定address 可以更人性化顯示：

Page({
  data: {
    lon: 120.674297,
    lat: 31.324571
  },
open_location: function() {
    var that = this;
    // 打開位置
    wx.openLocation({
      latitude: that.data.lat,
      longitude: that.data.lon,
      // scale: 10, // 縮放級別（5~18）默認是18
      address: '江蘇省蘇州市工業園區都市花園' // 這個信息可以通過地圖api逆向解析
    });
  }
})

效果：
10.位置信息.png

2.Map組件案例

知識點：

  • show-location：顯示當前定位點
  • markers：多個標識
  • bindmarkertap：標記點擊事件
  • 滿屏設置：width:100%;height:100vh

wxml：

<view>
  <map longitude='{{lon}}' latitude='{{lat}}' markers='{{markers}}' show-location='true' bindmarkertap='makertap' style='width:100%;height:100vh'></map>
  <!--  -->
</view>

JS：

Page({
  data: {
    lon: 120.674297,
    lat: 31.324571,
    markers: []
  },
  // 頁面加載
  onLoad: function() {
    var that = this;
    // eg：可以通過baidu Map獲取到markers信息
    // BMap.regeocoding({success: ret => {ret.wxMarkerData}});
    // 假設通過API獲取到了數據
    that.setData({
      markers: [{
        id: 0,
        latitude: that.data.lat,
        longitude: that.data.lon,
        address: '江蘇省蘇州市工業園區都市花園',
        iconPath: '/images/marker_red.png',
        callout: {
          'content': '江蘇省蘇州市工業園區都市花園',
          'bgColor': '#fff',
          'color': '#f00',
          'padding': 15,
          'display': 'ALWAYS', // BYCLICK：點擊顯示
          'borderRadius': 5
        }
      }]
    });
  },
  // 標記點擊事件
  makertap: function(e) {
    var that = this;
    // 提示
    wx.showToast({
      title: `點擊了標記點${e.markerId}`,
      icon: 'none'
    });
    // 可以根據e.markerId獲取marker信息
    console.log(that.data.markers[e.markerId]);
  }
})

動態演示：
10.點擊標記.gif

PS：可以通過經緯信息來獲取對應的位置信息（最后一個百度地圖的demo里有貼）

官方文檔：http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation

我還寫了一個慣連的案例，這邊就不演示了，給大家課后自測吧：
10.自測.gif

PS：在使用外部鏈接的時候需要添加到白名單中（補充說明里有貼哦~）

補充說明

1.關於調試

開發的時候可以在手機中預覽，也可以真機調試把輸出信息直接顯示到PC端：
調試.png

手機調試可以打開調試模式：
開啟調試.png

之后的操作都會記錄，而且控制台輸出也會顯示：
效果預覽.png
顯示信息.png

2.關於開發者設置

有了AppID，並不可以開發，還需要是開發者|管理員：
添加開發者.png

在沒有上線前，職工開發和體驗成員使用：
預覽和體驗.png

3.關於網絡資源的說明

在使用外部鏈接的時候需要添加到白名單中（網站必須備案過）
添加域名.png

4.發布和預覽

先要上傳代碼：
上傳.png
上傳2.png

這時候可以選擇
設置體驗版.png
體驗首頁.png
可體驗.png

PS：提交核審后就可以上線了（不推薦把自己做的demo提交核審，騰訊會處罰的~）

現在小程序提供了雲開發的API（可以當做數據庫+文件上傳下載）感興趣的可以先了解下：

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html

時候不早了，建議大家明天再看這篇文章（待續...）


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端菜鳥筆記angularjs的nginclude指令 前端菜鳥入門筆記——文本框操作 從前端菜鳥到大神，一篇總結得很好的文章 從前端菜鳥到大神，一篇總結得很好的文章 【學習記錄】微信小程序：前端開發 3年多前端菜雞的面試及知識梳理（一） Zabbix4.2對IIS監控摸索記錄 最新微信小程序前端反編譯破解過程記錄 小程序前端直傳阿里雲oss的一些記錄 前端菜單及按鈕權限攔截，實現方案及思路
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM