小程序開發總結(一)

最近在開發一個小程序項目準備上線中也是第一個作的小程序中間遇到不少坑經過本身不斷實踐和努力解決了也分享給你們,縮短你們的開發時間。html

1、修改背景顏色
這是一個很常見的需求在html的中咱們能夠改變body&html的標籤顏色,可是在小程序中你能夠經過兩種方法
一、修改page的顏色
二、在app.json的文件中修改前端

"backgroundTextStyle": "#f2f2f2", //注意這裏兩個屬性值須要一致本人親測
"backgroundColor": "#f2f2f2"

2、地圖引用(騰訊地圖)ios

一、在小程序的需求當中地理位置是常見的一種需求咱們這裏選用的是騰訊地圖,後臺用的是百度地圖有人確定問爲何不使用同一個地圖,這裏是出於百度地圖開發文檔比較齊全,市面上的開源的插件功能也比較齊全因此後臺選用的是百度地圖,小程序的爸爸是騰訊因此選的騰訊地圖可是在後臺須要對經緯度值作一個轉換由於百度和騰訊的地圖不是同一種經緯度標準。
圖片描述
後期仍是須要統一地圖標準json

騰訊地圖使用方法小程序

  1. 騰訊地圖官網申請一個開發者賬號附(http://lbs.qq.com/mykey.html
  2. 建立一個密鑰
  3. 在微信公衆號平臺設置一個安全域名
    這裏有個坑若是你不設置這個安全域名在手機演示中沒法訪問地圖api須要打開調試模式才行
  4. 具體api能夠看騰訊地圖文檔

3、尋找監聽安卓返回事件或者ios的頂部的返回事件api

我以前一直想找到這個事件由於某些頁面返回的時候須要返回到指定頁面而不是父級路由過來的頁面後面用小程序的生命週期函數解決了這個問題安全

onUnload(){
    wx.switchTab({
        url: '/pages/order/index',  // 這裏就是你一路向西的地方
        fail: function (res) {
        }
    })
}

4、字體圖標微信

我相信不少前端的開發者用完iconfont確定是愛不釋手了可是小程序不能用
圖片描述app

誰叫阿里騰訊不是一家人了,不過這個仍是有一個解決辦法xss

  1. 由於小程序背景圖只支持base64的咱們能夠將iconfont文件轉換爲base64的
  2. 從iconfont把文件下載下來記住咱們要選擇fontClass的模式
  3. 而後在這個平臺https://transfonter.org/把字體文件轉換成base64
  4. 在lib文件中引入
    圖片描述
  5. 在wxss加入字體
    圖片描述

    大功告成(後續不斷更新···)

相關文章
相關標籤/搜索