1. 程式人生 > >用vscode開發微信小程式

用vscode開發微信小程式

微信小程式這陣子非常火,相信大家都應該已經嘗過鮮了,論壇裡也有很多介紹的教程,講的都不錯,而我要講的是開發工具。

微信小程式有自己的開發工具,是基於nw.js寫的。做的比較簡潔,基本的程式碼編輯、智慧提示、除錯等功能都有。不好的地方也很明顯,不支援檢視引用,不支援程式碼重構,最可惡的是居然不支援自家api的智慧提示,寫起程式碼來不夠暢快。

我平常都是用vscode作為開發工具,想著要讓vscode支援微信小程式。於是今天抽空寫了個外掛。主要實現兩個功能:

檔案關聯

微信小程式是用.wxml檔案來表示頁面結構,用.wxss檔案來表示樣式表,vscode是不能識別這兩種副檔名的,因此沒有語法高亮,也不能用emmet


這個外掛會修改使用者設定中的檔案關聯,將.wxml對映到.html,.wxss對映到.css,語法高亮和emmet就都搞定了。

css

智慧提示

之前寫了個指令碼把官網文件裡列出的api都抓了出來,生成了wx.d.ts,這個外掛就是把生成的wx.d.ts丟到小程式專案目錄下。然後就可以愉快地使用智慧提示啦。

intellisense

2016.11.11更新

微信自帶開發工目前已經支援自家api提示和程式碼版,不過引數型別什麼的提示還是沒有;我這個外掛已經支援實時預覽,啟動專案後按ctrl + f8就可以開啟預覽功能,後續會繼續完善。

圖片描述

相關推薦

vscode發微程式

微信小程式這陣子非常火,相信大家都應該已經嘗過鮮了,論壇裡也有很多介紹的教程,講的都不錯,而我要講的是開發工具。 微信小程式有自己的開發工具,是基於nw.js寫的。做的比較簡潔,基本的程式碼編輯、智慧提示、除錯等功能都有。不好的地方也很明顯,不支援檢視引用,不支援程式碼

Java發微程式(三)程式給使用者推送服務訊息

第三篇 用小程式給使用者推送服務訊息 1.小程式登入獲取,小程式的openId和unionId。 2.獲取並解密小程式的加密資訊包括使用者和手機資訊。 3.用小程式給使用者推送服務訊息。 4.給繫結小程式而且又關注微信公眾號的使用者推送公眾號訊息。 小程式訊息推送機制有

一步一步發微程式

   小程式的開發與傳統的web前端開發極其相似,想必各位技術宅們關心的是如何去開發一個小程式,這裡我簡單介紹一下如何簡單上手開發小程式。 第一步:安裝         首先下載微信開

Java發微程式(二)獲取並解密程式使用者和手機資訊

第二篇 獲取並解密小程式的加密資訊包括使用者和手機資訊。 如果對其他的資訊幹興趣,還可以點選以下的連線 1.小程式登入獲取,小程式的openId和unionId。 2.獲取並解密小程式的加密資訊包括使用者和手機資訊。 3.用小程式給使用者推送服務訊息。​​​​​​​ 4.給繫結小

Java發微程式(一)登入並獲取程式的openId和unionId

第一篇 小程式登入獲取,小程式的openId和unionId。 最近公司做了一個微信的小程式應用,做了一些技術研究也踩了不少坑,不過最終結果不錯小程式順利上線。 在這裡做一個開發筆記,主要記錄以下幾個方面,分別用四篇文章來記錄: 1.小程式登入獲取,小程式的openId和unionId。

使用Mpvue發微程式——音樂程式專案原始碼分享

前言: 最近小組有個微信小程式分享的環節,於是在業餘時間使用mpvue框架寫了個音樂小程式,時間有限,專案暫時只是demo級別,之後有時間會繼續完善。 原始碼地址 github連結:https://github.com/XieTongXue/mpvue-music 專案簡

發微程式-目錄解析(二)

文件:https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#js-互動邏輯 普通快速模板 開發目錄 ├── app.js ├── app.json ├── app.wxss ├── pag

發微程式-安裝(一)

先註冊 https://mp.weixin.qq.com/wxopen/waregister?action=step1 下載小程式 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=181012

發微程式簡易教程

開發微信小程式簡易教程 開發小程式的第一步,你需要擁有一個小程式帳號,通過這個帳號你就可以管理你的小程式。 跟隨這個教程,開始你的小程式之旅吧! 申請帳號 點選 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根據指引填

mpvue發微程式的全域性變數問題-Vuex

如果你以前使用過原生的小程式開發,現在要使用mpvue框架的話,你應該也會遇到以下的問題: 1. 怎麼存放可全域性訪問的變數? 2. 頁面跳轉的時候,怎麼傳遞引數到下一個頁面比較好? 3. 頁面返回上一頁的時候,怎麼傳遞當前頁的資料到上一頁? 4. 多個頁面間需要同步資料,怎麼做比較

使用mpvue發微程式——原生微程式、mpvue、wepy對比

mpvue是什麼?為什麼使用它? 目前小程式開發主要有三種形式:原生、wepy、mpvue,其中wepy是騰訊的開源專案;mpvue是美團開源的一個開發小程式的框架,全稱mini program vue(基於vue.js的小程式),vue開發者使用了這個框架後,開發小程式的效率將得到

Taro發微程式實現簡單的登入退出功能

Taro是由凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架,還有我發現從某度上搜索的結果首頁居然看不到Taro框架的任何資訊,但是谷歌首頁就直接給出了結果,Taro使用文件。我是準備用它來開發微信小程式的,而且公司使用的前端架構正好是React

Thinkphp 發微程式第二天檔案程式碼架構

    下載安裝工具後有個demo檔案,仔細分析檔案程式碼架構,瞭解程式碼才能更好的進行開發。 1,index資料夾     .json 字尾的 JSON 配置檔案     .wxml 字尾的 WXML 模板檔案     .wxss 字尾的 WXSS 樣式檔案     .

Thinkphp 發微程式基礎元件第二天

   每個頁面都由於很多小的元素組成,這裡總結基礎元件分為以下七大類。 1,容器類      view    檢視容器      scroll-view    可滾動檢視容器     swiper    滑塊檢視容器 2,基礎內容     icon    圖示  

mpvue發微程式踩坑

在列表page點選進入詳情頁面時,用onShow()方法 去獲取資料去展示資料,因為onShow方法會在比mounted()執行更快。由於小程式的快取很嚴重,所以在返回的時候如果不將data中定義的資料清除的話,再次點選進入詳情頁面的話,還是會顯示第一次進入詳

Java發微程式登入介面

先說一下需求吧,小程式微信登入,使用者授權獲取個人資訊。然後儲存使用者基本資訊到系統使用者表,同時新增使用者賬戶資訊,上傳使用者頭像。 emmm..之所以想寫下來是因為自己踩過的坑啊。。就不細說了。 連結: 小程式微信登入官方文件   登入: 之後開發者伺服

發微程式:設定某個頁面為啟動後開啟的第一個頁面

在開發微信小程式的時候,除了tabBar上設定的頁面之外,想進入肯定要走跳轉之類的進入,但是我們開發的時候肯定想要直接看到該頁面,那麼我們就需要設定一下啟動頁面了有兩種方法。 方法一 在a

[微] 發微程式程式碼實戰

開發微信小程式流程 接入微信小程式 > 程式碼開發 > 提交稽核和釋出 接入 接入是指在微信平臺註冊和相關身份資訊認證 1:微信公眾平臺(https://mp.weixin.qq.com/) 註冊小程式,獲取唯一標識AppId ,和相關身份資訊認證 2:微信商

你的年目標實現了嗎,記一次發微程式

前言:這是筆者第一次開發小程式,此前一直有打算自己做一個,並且能夠上線使用,但一直找不到靈感,加上還需要伺服器端、資料庫等技能,所有一直沒能實現。後來偶然看到微信小程式雲開發(有點驚豔了,確實挺簡便),再加上一點點想法,於是就開始了小程式雲開發之旅。 第一步,要做什麼東西?   鑑於自己的技術水

發微程式進行微支付步驟

最近開發微信小程式進入到支付階段,一直以來從事App開發,所以支付流程還是熟記於心的。但是微信小程式的支付就有點奇怪了,應用的建立是在公眾號裡,但是文件的介紹卻在公眾號中無法找到直接入口,甚是不解,而且小程式的師傅到底是屬於公眾號支付範疇還是app支付範疇也成疑問。下面