月30日，以“產業升級、安全升維”為主題的第五屆互聯網安全領袖峰會（Cyber Security Summit，簡稱CSS 2019）在北京舉行。會上，騰訊安全聯合實驗室掌門人及騰訊安全業務負責人，聯合發布了首份聚焦于產業互聯網安全的行業報告——《CSS視角下的2019年產業互聯網安全十大議題》（簡稱《十大議題》），圍繞5G、智慧政務、數據加密等新技術在產業領域的落地，結合安全相關案例法規，對產業互聯網領域的安全問題做了深度解讀，也為產業互聯網下一階段的安全發展提供了相應的解決方案。

（騰訊安全聯合實驗室掌門人及騰訊安全業務負責人合影）

在產業互聯網時代，隨著各行各業的數字化程度不斷加深，聯網終端的多樣性、使用環境的復雜性，正在讓產業環境下的人、信息、物之間的交叉連接日益復雜。進而導致安全的防護邊界越來越模糊、攻擊復雜度越來越高，催生出更多的安全威脅。數據資產安全、業務安全、身份權限管理等安全問題逐步顯現，成為制約企業持續發展的核心問題。

產業升級轉型催生了復雜的安全環境。為了進一步幫助企業理清發展思路，促進安全能力向生產力轉化，作為CSS 2019會議的延續，騰訊安全發布的《十大議題》首次聚焦產業互聯網安全，從產業政策、技術應用、業務場景等方面，對產業互聯網時代的安全變化和技術趨勢進行了盤點和解讀，選取最具代表性的年度十大議題，詮釋產業互聯網安全的發展趨勢，提升企業對于產業升級所帶來的安全問題認知。

事實上，隨著5G的到來，云計算、AI、IoT等前沿技術的不斷突破，釋放更多生產力的同時，也因為聯網終端的數量、種類與復雜性的增加，催生了更多的安全威脅。智能網聯汽車就是一個最經典的案例。智能網聯汽車除了傳統的車輛電子電器各類ECU、車電網絡和車電協議實現外，還大量引入了如互聯網通信、數字化座艙及車載互聯應用、高級輔助駕駛乃至未來的自動駕駛等新技術，以實現汽車行業通過智能網聯的技術路線實現產業升級和數字化轉型。或許，每一項功能或系統都具有安全防護能力，但是，當組合在一起，由于架構設計缺陷或者工程實現問題會造成嚴重的信息安全問題，如個人隱私信息泄露；更嚴重的會導致行車安全、人身和公共安全問題，例如智能車輛被遠程入侵和控制。

如果將這個場景擴大到以物聯網為基礎構建的各類智慧生活場景中，當大量采集使用者的各種生活或生理信息的智能終端，如手表、智能音箱等，因為漏洞或兼容性等問題，被人惡意獲取，其后果難以想象。涉及到更復雜的物聯終端，如智能電梯、智能安防、智能機器人等場景，更會帶來人身安全和公共安全風險。

面對產業安全的新特性，騰訊安全發布的《十大議題》，通過對產業互聯網安全發展動態，以及典型性案例的掃描與整理，希望為產業內從業者、合作伙伴提供更詳實的參考，洞悉產業安全威脅的產生與傳播，對未來的產業安全發展有更準確的判斷。

在《十大議題》中，根據產業安全面臨的不同問題，騰訊安全也針對性的給出了不同的解決方案。比如，針對物聯網及車聯安全，騰訊安全科恩實驗室研發了一款全自動IoT固件安全掃描系統IoTSec，對設備固件以及固件配套的源代碼進行安全掃描；面對各類APT攻擊威脅，騰訊安全湛瀘實驗室安全認為，在常態網絡環境下，以紅藍對抗、用接近真實攻擊的方式，進行網絡攻防對抗演習，成為了檢驗企業安全防御的新標尺；針對云安全問題，騰訊云安全團隊給出了基于“云、管、端”協同的全鏈路智慧安全解決方案，讓企業可以可一鍵式的啟動全棧式安全防護能力；在終端安全與認證方面，騰訊無線安全團隊針對物聯終端接入認證不完善等安全問題，推出了統一端點管理系統（Unified Endpoint Management）的行業解決方案，讓企業可根據自身需求集中管理和保護終端設備、應用程序及移動數據。

產業互聯網時代，安全正在成為企業的核心競爭力之一，企業需要更為主動、動態、整體、精準和開放的安全運維管理思維。簡言之，就是需要從戰略視角去系統性規劃產業安全。正如騰訊公司云與智慧產業總裁湯道生在CSS 2019的致辭中所說，以騰訊一己之力，無法滿足產業互聯網海量客戶的安全需求。騰訊希望攜手安全產業鏈合作伙伴，共建產業互聯網安全生態，通過情報、技術、人才的開放和共享，持續為產業互聯網安全發展，提供源源不斷的動力支持。

來源：東方資訊

言

1.1「騰訊位置服務」是什么？

立足生態，連接未來

騰訊位置服務平臺依托龐大的數據生態，以定位、地圖展示、地點搜索、路線規劃、導航、室內圖、海外圖等位置服務能力和LBS大數據能力為基礎，面向開發者提供方便、易用、高效的LBS服務產品。當前騰訊位置服務數據能力已覆蓋10億人的位置行為數據、日均超過600億次的定位調用、每日支持1億次位置檢索。

1.2「騰訊位置服務」可應用的場景？

隨著功能的日益完善，騰訊位置服務可適用的場景也越來越多，如物流業務、智能出行、o2o業務、共享單車、運動健康、LBS游戲服務等行業均可見騰訊位置服務的身影。筆者也將通過此文展示下騰訊位置服務在智能出行行業的應用與實踐。

需求背景

2.1 「乘車二維碼」微信小程序

自從2017年微信上線小程序以來，小程序已經迅速成長為一個巨大的生態，吸引各行各業的開發者或服務商參與其中。小程序與線下場景的結合也日益緊密，其中，乘車二維碼微信小程序無疑讓人們的出行服務變的更加簡單、快捷。先乘車，后扣費，無論手機是否聯網，是否有信號，都可以很順暢的進行乘車。

2.2 完善「乘車二維碼」微信小程序

有了最基本的「乘車二維碼」功能對用戶體驗來說，還是遠遠不夠的，為此，從用戶體驗的角度出發，我們逐漸新增了一些實用的功能，比如查詢附近的公交信息、用戶路線規劃等。也正因為新增了這些實用性的功能，我們發現「乘車二維碼」微信小程序在數據表現(如日活、留存、使用時長)方面更加出色了，「騰訊位置服務」也成為我們「乘車二維碼」微信小程序內不可或缺的角色。

接下來，筆者將通過公交地圖、路線規劃兩個功能點更加詳細的介紹「騰訊位置服務」中的微信小程序 JavaScript SDK、微信小程序插件。

公交地圖

3.1 效果預覽

3.2 技術點分析

在上面的效果預覽圖中，我們不難發現，實現公交地圖功能主要包含以下技術要點：

• 獲取用戶當前位置信息

• 通過坐標點獲取附近公交信息

• 地圖展示、標注

3.3 技術點實現

3.3.1 獲取用戶當前位置信息

我們可以通過微信小程序官方提供的api：wx.getLocation，來獲取用戶的當前位置坐標點信息：

wx.getLocation({
type: 'gcj02',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
}
})

這里我們將 type 指定為 gcj02 獲取到的坐標點信息可在后續接口中直接使用，相對應的，如果將 type 指定為 wgs84，后續我們需要進一步進行坐標轉換。

還有個需要注意的是，該接口需要經過用戶授權同意才能調用，因此我們需要在 app.json 文件中新增相關配置：

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于查詢公交信息"
}
}

3.3.2 獲取附近公交信息

附近公交數據哪里來？

這里我們便用到了微信小程序原生LBS能力的最佳拍檔-- 微信小程序JavaScript SDK。

騰訊位置服務為微信小程序提供了基礎的標點能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點等地圖API位置服務能力支持，使得開發者可以自由地實現自己的微信小程序產品。在此基礎上，騰訊位置服務微信小程序JavaScript SDK是專為小程序開發者提供的LBS數據服務工具包，可以在小程序中調用騰訊位置服務的POI檢索、關鍵詞輸入提示、地址解析、逆地址解析、行政區劃和距離計算等數據服務，讓您的小程序更強大！

接下來筆者將展示如何通過微信小程序JavaScript SDK獲取附近公交的信息。

1. 開通「騰訊位置服務」：在微信小程序后臺依次選擇開發->開發者工具->騰訊位置服務，然后點擊開通按鈕，按照提示為您的小程序開通「騰訊位置服務」

2. 申請開發者密鑰(key)：申請密鑰（https://lbs.qq.com/dev/console/key/manage）

3. 安全域名設置：在在微信小程序后臺依次選擇設置->開發設置中設置request合法域名，添加 https://apis.map.qq.com

4. 下載微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2（http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip）

5. 小程序使用：

//index.js
// 引入 JavaScript SDK 核心類
let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
let qqmapsdk;
Page({
onLoad: function  {
// 實例化API核心類
qqmapsdk = new QQMapWX({
key: '申請的key'
});
},
onShow: function  {
// 調用接口
qqmapsdk.search({
keyword: '公交車站',
location: '28.636767,115.855820',
filter: 'category=公交站',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})

返回結果：

可以看到，我們已經拿到了我們想要的公交數據，接下來將公交數據在地圖上標注展示出來。

3.3.3 地圖展示、標注

公交信息的展示使用到了「騰訊位置服務」為小程序提供的 map 組件，我們需要將公交信息組裝成 markers 從而繪制到地圖組件上。

關于地圖組件的具體使用可參考官方文檔：map組件的使用（https://developers.weixin.qq.com/miniprogram/dev/component/map.html）

3.4 小結

可以看到，我們通過微信小程序JavaScript SDK可以很輕松的獲取到附近的公交信息。當然，微信小程序JavaScript SDK的能力也遠遠不僅于此，它還提供很多實用性的功能滿足多種使用場景：

詳細使用可參考官方文檔：微信小程序JavaScript SDK 使用方法（https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html）

需要注意的是，每個key的每個服務接口的調用量都有日調用量：1萬次/Key、并發數：5次/key/秒的限制，如若您的微信小程序使用量超出這個限制，可通過控制臺->配額申請（https://lbs.qq.com/dev/console/quota/applyList）中免費申請你需要的配額。

路線規劃

如果說，「乘車二維碼」微信小程序讓人們的出行變得更加簡單、快捷。

那么，路線規劃插件則為人們怎么出行提供了最優解。

4.1 效果預覽

4.2 路線規劃插件

騰訊位置服務路線規劃插件 提供路線規劃等功能，根據起終點，多種出行方式智能規劃最佳出行路線及詳情。開發者可以將路線規劃插件嵌入到自建小程序的頁面里，實現路線規劃功能。

可以看到，通過使用路線規劃插件，我們可以很方便的在我們「乘車二維碼」微信小程序內完成路線規劃功能，接入步驟也較為簡單，主要分為以下幾步：

插件申請接入：

在微信小程序后臺管理平臺中，依次選擇設置->第三方服務->插件管理里點擊添加插件，搜索騰訊位置服務路線規劃申請，審核通過后，小程序開發者可在小程序內使用該插件。

引入插件包：

// app.json
"plugins": {
"routePlan": {
"version": "1.0.5",
"provider": "wx50b5593e81dd937a"
}
}

設置定位授權:

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序定位"
}
}

使用插件：

let key = '申請的key'; //使用在騰訊位置服務申請的key
let referer = ''; //調用插件的app的名稱
let endPoint = JSON.stringify({ //終點
'name': '八一廣場',
'latitude': 28.673400,
'longitude': 115.904500
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

在集成路線規劃插件后，進一步豐富了我們「乘車二維碼」微信小程序的使用場景，現在，用戶可以在不使用地圖類App的情況下進行最優路線規劃，躲避擁堵，方便又快捷。

4.3 小結

「騰訊位置服務」提供的微信小程序插件，可以說讓微信小程序一步擁有地圖功能，大大的減少了我們開發的工作量、提升用戶體驗、增加了小程序的使用場景。

目前，「騰訊位置服務」已經為我們提供了三款實用性插件：

• 路線規劃：根據起點、終點，智能規劃最佳出行路線，并支持多種出行方式。

• 地鐵圖：支持全國所有城市地鐵線路靜態展示、信息查詢、線路檢索及規劃等功能。

• 地圖選點：快速、準確地選擇并確認自己的當前位置，并將相關位置信息回傳給開發者。

具體可查看官方文檔：微信小程序插件（https://lbs.qq.com/miniprogram_plugin/index.html）。

相信后續也會為我們提供更多功能的插件。

結語

我們在完善「乘車二維碼」微信小程序的道路上從未停止過腳步，給用戶提供完美的出行體驗是我們的終極目標。我們也不會停止在「騰訊位置服務」上的探索，目前所使用到的能力也僅僅是冰山一角，后續我們還會繼續嘗試「騰訊位置服務」提供的個性化地圖、地鐵圖等能力，力爭給用戶提供最完美的出行體驗。

言

面試官：同學考你一個簡單css內容，寫一個可展開列表。

我：笑出了聲。心想真的會出這么簡單的內容哈哈哈！

面試官：同學不能用js哦，如果可以用stylus編寫就更好啦！

我：小腦剎那間萎縮了......

Stylus 是一種 CSS 預處理器。預處理器是一種腳本語言，它擴展了 CSS 的功能，使得編寫 CSS 更加高效、靈活和強大。Stylus 特別之處在于其簡潔而靈活的語法，它允許開發者使用變量、嵌套規則、混合（Mixins）、繼承、操作符、函數以及條件語句等高級功能來編寫樣式代碼。

接下來，讓我們通過一個騰訊的面試題，來更加深層次認識這個stylus語言帶給css的便捷。雖然考察的是純html+css內容，要想純html+css達到完美可卻不簡單。

效果

有三個列表，并且可以展開和收縮，這題目看起來簡單，但是且聽我細細道來，你會發現里面有很多的秘密！

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>純css菜單</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <div class="accordion">
        <input type="checkbox" id="collapse1" hidden>
        <input type="checkbox" id="collapse2" hidden>
        <input type="checkbox" id="collapse3" hidden>
        <!-- div替代品 html5語義化標簽 SEO比較重要 -->
        <article>
            <label for="collapse1">列表1</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>內容1</p>
            <p>內容2</p>
            <p>內容3</p>
            <p>內容4</p>
        </article>
    </div>
</body>

</html>

首先我們要進行stylus語言環境的配置，并引入其生成的css文件，配置好之后，我們先看看html部分。

1. 我們設置了三個復選框，并且復選框的id與label標簽的for相對應，可以方便用戶的操作。服務于用戶。
2. 我們用article語義化標簽，這有助于搜索引擎優化（SEO）和屏幕閱讀器更好地理解頁面結構。每個標簽里面放入四段列表。

到此我們html部分就結束啦，我們重點講解一下css部分。

css部分

* {
  margin: 0;
  padding: 0;
}
.accordion {
  width: 300px;
}
.accordion article {
  cursor: pointer;
}
.accordion article + article {
  margin-top: 5px;
}
.accordion label {
  display: block;
  height: 40px;
  padding: 0 20px;
  background-color: #f00;
  cursor: pointer;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
}
.accordion p {
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid #f66;
  border-top: none;
  border-bottom-width: 0;
  max-height: 0;
  line-height: 30px;
  transition: all 500ms;
}
.accordion input:nth-child(1):checked ~ article:nth-of-type(1) p,
.accordion input:nth-child(2):checked ~ article:nth-of-type(2) p,
.accordion input:nth-child(3):checked ~ article:nth-of-type(3) p {
  max-height: 600px;
}
    <生成css>
---------------------------
    <書寫的stylus>
    
    *
    margin 0
    padding 0
.accordion 
    width 300px
    article
        cursor pointer
        & + article
            margin-top 5px
    label
        display block
        height 40px
        padding 0 20px
        background-color red
        cursor pointer
        line-height 40px
        font-size 16px
        color #fff
    p
        overflow: hidden
        padding: 0 20px
        border: 1px solid #f66
        border-top: none
        border-bottom-width 0
        max-height: 0
        line-height 30px
        transition: all 500ms
    input  
        &:nth-child(1):checked ~ article:nth-of-type(1)  p , 
        &:nth-child(2):checked ~ article:nth-of-type(2)  p ,
        &:nth-child(3):checked ~ article:nth-of-type(3)  p 
            max-height:  600px

1. 我們首先清除默認的內外邊距。
2. 對整體的accordion設置寬度。
3. 對article標簽設置鼠標經過變成小手。
4. 通過相鄰兄弟選擇器我們設置第二個和第三個article的margin top 值。
5. 對label標簽我們設置一些基本的樣式。
6. 接下來就是我們最重要的部分，我們這里運用了全體兄弟選擇器，我們以input下第一段為例子說明，后面都是一樣的，我們選中第一個被勾選的復選框，然后通過全體兄弟選擇器找到所有的article，并根據復選框的序號找到對應article的位置，然后將里面的p顯現出來，這一段是我們的核心部分！所以也可以理解為nth-child搭配input，nth-of-type搭配article。

作者：落雪遙夏
鏈接：https://juejin.cn/post/7379873506543616010