小程序簡介

一．小程序簡介

小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。對於開發者而言，小程序開發門檻相對較低，難度不及APP，可以知足簡單的基礎應用，適合生活服務類線下商鋪以及非剛需低頻應用的轉換。小程序可以實現消息通知、線下掃碼、公衆號關聯等七大功能。其中，經過公衆號關聯，用戶能夠實現公衆號與小程序之間相互跳轉。因爲小程序不存在入口。

第一步：你須要有一個小程序帳號，經過這個帳號你就能夠管理你的小程序

第二步：[申請賬號 --- 點擊] (https://mp.weixin.qq.com/wxopen/waregister?action=step1)根據指引填寫信息和提交相應的資料，就能夠擁有本身的小程序賬號。主要是獲取到 APPID:wxcf777872777e

第三步：下載微信開發者工具

第四步：代碼的構成（分爲四部分）

.json 後綴的 JSON 配置文件

.wxml 後綴的 WXML 模板文件

.wxss 後綴的 WXSS 樣式文件

.js 後綴的 JS 腳本邏輯文件

這4種文件的做用以下：
在根目錄下用app來命名的這四中類型的文件，就是程序入口文件。

app.js

必需要有這個文件，沒有也是會報錯！可是這個文件建立一下就行 什麼都不須要寫
之後咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。

app.wxss

這個文件不是必須的。由於它只是個全局CSS樣式文件

app.wxml

這個也不是必須的，並且這個並非指主界面哦~由於小程序的主頁面是靠在JSON文件中

API

爲了讓開發者能夠方便地調起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了不少API給開發者去使用

要獲取用戶的地理位置

調用微信掃一掃能力

 

app.json ：是對小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部tab等。例如

必需要有這個文件，若是沒有這個文件，IDE會報錯，由於微信框架把這個做爲配置文件入口，
你只需建立這個文件，裏面寫個大括號就行
之後咱們會在這裏對整個小程序的全局配置。記錄了頁面組成，配置小程序的窗口 背景色，配置導航條樣式，配置默認標題。

一、pages字段 -- 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前的小程序頁面定義在哪一個目錄下

二、windows字段 -- 小程序全部頁面的頂部北京顏色，文字顏色定義在這裏的

其餘配置項細節能夠參考文檔 小程序的配置 app.json

Eg:

app.json文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
window用於設置小程序的狀態欄、導航條、標題、窗口背景色。

 

屬性	類型	默認值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如"#000000"
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
navigationStyle	String	default	導航欄樣式，僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕	微信版本 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark/light
backgroundColorTop	String	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信版本 6.5.16
backgroundColorBottom	String	#ffffff	底部窗口的背景色，僅 iOS 支持	微信版本 6.5.16
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新，詳見頁面相關事件處理函數
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px

 

tabBar

若是小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

Tip： 當設置 position 爲 top 時，將不會顯示 icon
tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top

 

注意：

跳過域名校驗

在微信開發者工具中，能夠臨時開啓 開發環境不校驗請求域名、TLS版本及HTTPS證書 選項，跳過服務器域名的校驗。此時，在微信開發者工具中及手機開啓調試模式時，不會進行服務器域名的校驗。

 

工具配置：

小程序開發者工具在每一個項目的根目錄都會生成一個 project.config.json，你在工具上作的任何配置都會寫入到這個文件，當你從新安裝工具或者換電腦工做時，你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。

頁面配置 page.json

這裏的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。
若是你整個小程序的風格是藍色調，那麼你能夠在 app.json 裏邊聲明頂部顏色是藍色便可。實際狀況可能不是這樣，可能你小程序裏邊的每一個頁面都有不同的色調來區分不一樣功能模塊，所以咱們提供了 page.json，讓開發者能夠獨立定義每一個頁面的一些屬性，例如剛剛說的頂部顏色、是否容許下拉刷新等等。

 

二．生命週期

1. 應用生命週期

 

App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。

object參數說明
onLaunch 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
onHide 當小程序從前臺進入後臺，會觸發 onHide
onError 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
onPageNotFound 當小程序出現要打開的頁面不存在的狀況，會帶上頁面信息回調該函數
前臺、後臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。須要注意的是：只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被真正的銷燬。

2.頁面生命週期

 

Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命週期函數、事件處理函數等。
1.小程序註冊完成後，加載頁面，觸發onLoad方法。
2.頁面載入後觸發onShow方法，顯示頁面。
3.首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。
4.當小程序後臺運行或跳轉到其餘頁面時，觸發onHide方法。
5.當小程序有後臺進入到前臺運行或從新進入頁面時，觸發onShow方法。
6.當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload

1.1.小程序初始化完成後，頁面首次加載觸發onLoad，只會觸發一次。
2.當小程序進入到後臺，先執行頁面onHide方法再執行應用onHide方法。
3.當小程序從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。

3.微信支付功能實現

一、申請微信支付。小程序認證之後，能夠在小程序後臺，微信支付菜單欄，申請微信支付。填寫企業信息和對公帳戶，微信支付會打一筆隨機金額到對公帳戶，輸入金額完成驗證後，在線簽署遷移，即完成了微信支付的申請流程。
微信支付申請完，會發送微信支付商戶號，商戶平臺用戶名密碼等信息到註冊者郵箱。

二、配置小程序密鑰。小程序後臺設置頁，點擊生成，管理員驗證二維碼後，會隨機生成AppSecret。請妥善保管好Appsecret，不要明文存儲於服務器，AppSecret用於和微信服務器交互。好比獲取用戶的openid接口就須要用到.

三、設置密鑰和下載證書
用申請微信支付得到的用戶名和密碼，登陸商戶平臺(pay.weixin.qq.com)，在帳戶中心，API安全中下載證書和設置密鑰。
密鑰是32位，設置之後須要妥善保管，由於沒法查看密鑰，全部微信支付相關的接口都會使用這個密鑰加密。
四、配置HTTPS服務器 小程序的前端是使用微信提供的框架開發，可是後臺依然是開發者本身的服務器。小程序發起的是HTTPS請求，意味着小程序開發者必須配置HTTPS服務器。配置HTTPS服務器以前，先要獲取證書，證書能夠向相關機構購買，騰訊雲目前能夠向用戶提供免費的證書。
五、微信支付流程
微信支付有多種支付方式，包括刷卡支付，公衆號支付，掃碼支付，APP支付，全部微信支付的接口均可以到官方找到。小程序是在微信裏調起支付的，實際上是公衆號支付，關於公衆號支付的詳細文檔能夠這裏找到：http://bbs.html51.com/f-37-1/。全部公衆號支付相關的連接均可以在此連接找到，開發者首先須要大概瞭解這些接口。

六、小程序調起微信支付，用的是小程序微信支付接口wx.requestPayment，該接口的詳細描述能夠查看小程序的微信支付API。
這個接口中的package和timeStamp參數是從開發者的第三方服務器返回的，package是第三方服務器從統一下單接口回覆中得到。
接口中其餘的參數，appId，noceStr，signType以及paySign則由小程序這邊存儲或者計算而得。

支付：前提是你要開通的有微信支付功能，須要商戶號，appid，appsecret,

3-1開通微信支付功能：

流程（預計耗時：1-5天）:

一、填寫申請信息

二、通過微信支付審覈

三、查收開戶郵件

四、驗證打款金額

五、登陸商戶平臺簽署協議

 

3-2獲取商戶號+祕鑰：

一步：申請微信支付帳號

登陸 微信小程序後臺， 點擊左側【微信支付】，選擇【開通】，按照頁面提示填寫資料。

收到審覈經過的郵件後就能夠開始配置工做。須要登陸商戶平臺 , 在頁面填寫打款收到的金額，並在線簽署協議，完成支付申請。

二步：獲取商戶號

登陸微信支付商戶後臺。

點擊上方【帳戶中心】，找到左側【商戶信息】，獲取商戶號。

第三步：獲取API密鑰

登陸微信支付商戶後臺 。

點擊上方【帳戶中心】，找到【 API 安全】。

點擊【設置密鑰】，自行設置32位的 API 密鑰並記錄下來。設置的32位的密匙，須要咱們本身緊緊記住的。支付後臺不會爲咱們保存的。

 

 

 

 

 

3-3獲取AppId和AppSecret

 

3-4支付代碼以下：

1.openid問題：禁止了api.weixin.qq.com域名的直接請求的，解決這個問題的惟一辦法就是寫一個PHP扔到本身的服務器上，藉助這個PHP請求openid的接口，再返回給小程序端。

按既定順序排列，不能顛倒，而且商戶key值是例外，得排在最後。統一支付簽名，把appid、商品名、商戶id、nonce值、notify_url、openid、訂單號、金額….等等一連串的值，按照key=value&key=value&…格式，key爲字母順序排列下來，最後加上」商戶key」（在商戶後臺得到），組成一個字符串，並通過MD5加密後生成一串簽名值。

 

一、必須開通支付，而且有備案的域名 和 配置 https

 

 

 

2.微信小程序處理

.wxml

 

.js

 

3. 後臺處理部分後臺經過http請求來調了

 

你要首先有個店鋪，就有商戶號，訂單號必須惟一，通知地址就是當支付成功後微信會回調這個地址，在這裏你能夠作一些事，好比修改訂單狀態什麼的。

 

而後就是簽名生成，把須要的參數都放到一個map中，而後對這些參數進行排序，而後把商品key拼接到後面進行MD5加密就生成簽名了，我仍是建議仔細看看簽名生成算法，不要想太複雜，就是排序，拼接，加密三步完成。

 

最後就是準備參數傳輸了，這裏的參數傳輸是以xml的方式傳輸，下面就是傳輸的數據，其實就是一個大的字符串

支付代碼以下：//小程序端代碼：

pay:function(){

var that=this

wx.getStorage({

key: 'openid',

success: function(res) {

wx.request({

//這裏是後臺的處理方法，url是自定義的，直接換成你本身的後臺處理方法便可，Wx_Pay這個方法在下面寫的有

//後臺用的php作處理，java的能夠參考方法，道理都是同樣的

url: url + 'Wx_Pay',

data: {

//用戶的openid

openid:res.data,

fee: that.data.totalPrice, //支付金額

details: that.data.goodsList[0].goods_name,//支付商品的名稱

},

success:function(result){

if(result.data){

//out_trade_no=res.data['out_trade_no'];

wx.requestPayment({

timeStamp: result.data['timeStamp'],

nonceStr: result.data['nonceStr'],

package: result.data['package'],

signType: 'MD5',

paySign: result.data['paySign'],

'success':function(successret){

console.log('支付成功');

//獲取支付用戶的信息

wx.getStorage({

key: 'userInfo',

success: function (getuser) {

//加入訂單表作記錄

wx.request({

url: url + 'Wx_AddOrder',

data: {

uname: getuser.data.nickName,

goods: that.data.goodsList[0].goods_name,

price: that.data.totalPrice,

openid:res.data,

},

success: function (lastreturn) {

console.log("存取成功");

}

})

},

})

},'fail':function(res){

}

})

}

}

})

},

})

},

//後臺

 

//微信支付

    public function Wx_Pay(){

        $request=Request::instance();

        $fee=$request->param('fee');

        $details=$request->param('details');//商品的詳情，好比iPhone8，紫色

       // $fee = 0.01;//舉例充值0.01

        $appid =        'appid';//appid

        $body =        $details;// '金邦匯商城';//'【本身填寫】'

        $mch_id =       '1486742092';//'你的商戶號【本身填寫】'

        $nonce_str =    $this->nonce_str();//隨機字符串

        $notify_url =   'https://zys.jinbh.cn/admin/Api/Wx_Speech';//回調的url【本身填寫】';

        $openid =       $request->param('openid');//'用戶的openid【本身填寫】';

        $out_trade_no = $this->order_number($openid);//商戶訂單號

        $spbill_create_ip = '123.206.45.131';//'服務器的ip【本身填寫】';

        $total_fee =    $fee*100;//由於充值金額最小是1 並且單位爲分 若是是充值1元因此這裏須要*100

        $trade_type = 'JSAPI';//交易類型 默認

        //這裏是按照順序的 由於下面的簽名是按照順序 排序錯誤 確定出錯

        $post['appid'] = $appid;

        $post['body'] = $body;

        

        $post['mch_id'] = $mch_id;

      

        $post['nonce_str'] = $nonce_str;//隨機字符串

      

        $post['notify_url'] = $notify_url;

      

        $post['openid'] = $openid;

      

        $post['out_trade_no'] = $out_trade_no;

      

        $post['spbill_create_ip'] = $spbill_create_ip;//終端的ip

      

        $post['total_fee'] = $total_fee;//總金額 最低爲一塊錢 必須是整數

     

        $post['trade_type'] = $trade_type;

        $sign = $this->sign($post);//簽名

        $post_xml = '<xml>

           <appid>'.$appid.'</appid>

           <body>'.$body.'</body>

           <mch_id>'.$mch_id.'</mch_id>

           <nonce_str>'.$nonce_str.'</nonce_str>

           <notify_url>'.$notify_url.'</notify_url>

           <openid>'.$openid.'</openid>

           <out_trade_no>'.$out_trade_no.'</out_trade_no>

           <spbill_create_ip>'.$spbill_create_ip.'</spbill_create_ip>

           <total_fee>'.$total_fee.'</total_fee>

           <trade_type>'.$trade_type.'</trade_type>

           <sign>'.$sign.'</sign>

        </xml> ';

        //統一接口prepay_id

        $url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';

        $xml = $this->http_request($url,$post_xml);

        $array = $this->xml($xml);//全要大寫

        if($array['RETURN_CODE'] == 'SUCCESS' && $array['RESULT_CODE'] == 'SUCCESS'){

            $time = time();

            $tmp='';//臨時數組用於簽名

            $tmp['appId'] = $appid;

            $tmp['nonceStr'] = $nonce_str;

            $tmp['package'] = 'prepay_id='.$array['PREPAY_ID'];

            $tmp['signType'] = 'MD5';

            $tmp['timeStamp'] = "$time";

 

            $data['state'] = 1;

            $data['timeStamp'] = "$time";//時間戳

            $data['nonceStr'] = $nonce_str;//隨機字符串

            $data['signType'] = 'MD5';//簽名算法，暫支持 MD5

            $data['package'] = 'prepay_id='.$array['PREPAY_ID'];//統一下單接口返回的 prepay_id 參數值，提交格式如：prepay_id=*

            $data['paySign'] = $this->sign($tmp);//簽名,具體簽名方案參見微信公衆號支付幫助文檔;

            $data['out_trade_no'] = $out_trade_no;

 

        }else{

            $data['state'] = 0;

            $data['text'] = "錯誤";

            $data['RETURN_CODE'] = $array['RETURN_CODE'];

            $data['RETURN_MSG'] = $array['RETURN_MSG'];

        }

      echo json_encode($data);

    }

 

 

//隨機32位字符串

    private function nonce_str(){

        $result = '';

        $str = 'QWERTYUIOPASDFGHJKLZXVBNMqwertyuioplkjhgfdsamnbvcxz';

        for ($i=0;$i<32;$i++){

            $result .= $str[rand(0,48)];

        }

        return $result;

    }

 

 

//生成訂單號

    private function order_number($openid){

        //date('Ymd',time()).time().rand(10,99);//18位

        return md5($openid.time().rand(10,99));//32位

    }

 

 

 

 

//簽名 $data要先排好順序

    public function sign($data)

    {

        $stringA = '';

        foreach ($data as $key => $value) {

            if (!$value) continue;

            if ($stringA) $stringA .= '&' . $key . "=" . $value;

            else $stringA = $key . "=" . $value;

        }

        $wx_key = 'Zhangyusheng19810318015729366660';//申請支付後有給予一個商戶帳號和密碼，登錄後本身設置key

        $stringSignTemp = $stringA . '&key=' . $wx_key;//申請支付後有給予一個商戶帳號和密碼，登錄後本身設置key

      return strtoupper(md5($stringSignTemp));

    }

 

//curl請求啊

        function http_request($url, $data = null, $headers = array())

        {

            $curl = curl_init();

            if (count($headers) >= 1) {

                curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);

            }

            curl_setopt($curl, CURLOPT_URL, $url);

 

            curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);

            curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

 

            if (!empty($data)) {

                curl_setopt($curl, CURLOPT_POST, 1);

                curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

            }

            curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

            $output = curl_exec($curl);

            curl_close($curl);

            return $output;

        }

 

//獲取xml

        private function xml($xml){

            $p = xml_parser_create();

            xml_parse_into_struct($p, $xml, $vals, $index);

            xml_parser_free($p);

            $data = "";

            foreach ($index as $key=>$value) {

                if($key == 'xml' || $key == 'XML') continue;

                $tag = $vals[$value[0]]['tag'];

                $value = $vals[$value[0]]['value'];

                $data[$tag] = $value;

            }

            return $data;

        }

//微信支付結束

 

 

 

1. 1. 小程序開發工具

【小程序開發框架】

一．【Ui庫】

WeUI WXSS

1.WeUI WXSS是騰訊官方UI組件庫WeUI的小程序版，提供了跟微信界面風格一致的用戶體驗。

GitHub地址：https://github.com/Tencent/weui-wxss

2.iView WeApp

iView是TalkingData發佈的一款高質量的基於Vue.js組件庫，而iView weapp則是它們的小程序版本。

GitHub地址：https://github.com/TalkingData/iview-weapp
npm下載：npm i iview-weapp

3.ZanUI WeApp

ZanUI WeApp是有贊移動 Web UI 規範 ZanUI 的小程序實現版本，結合了微信的視覺規範，爲用戶提供更加統一的使用感覺。

 

現已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等組件或元素。

GitHub地址：https://github.com/youzan/zanui-weapp
npm下載：npm i zanui-weapp

 

4.MinUI

MinUI 是蘑菇街前端開發團隊開發的基於微信小程序自定義組件特性開發而成的一套簡潔、易用、高效的組件庫，適用場景廣，覆蓋小程序原生框架，各類小程序組件主流框架等，而且提供了專門的命令行工具。

GitHub地址：https://github.com/meili/minui

5. Wux WeApp

6. ColorUI

colorUI是一個Css類的UI組件庫！不是一個Js框架。相比於同類小程序組件庫，ColorUI更注重於視覺交互！

其組件在美觀性方面比較突出。

GitHub地址：https://github.com/weilanwl/ColorUI

二．【開發框架】

一、官方框架MINA

小程序提供的開發框架爲MINA框架，它相似於淘寶Weex、Vue框架。MINA框架經過封裝微信客戶端提供的文件系統、網絡通訊、任務管理、數據安全等基礎功能，對上層提供一整套Java API,讓開發者可以很是方便地使用微信客戶端提供的各類基礎功能與能力，快速構建一個應用。

地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

二、美團小程序框架mpvue

mpvue 是美團點評開源的一個使用Vue.js開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。使用 mpvue 開發小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：

完全的組件化開發能力：提升代碼複用性

完整的 Vue.js 開發體驗

方便的 Vuex 數據管理方案：方便構建複雜應用

快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload

支持使用 npm 外部依賴

使用 Vue.js 命令行工具 vue-cli 快速初始化項目

H5 代碼轉換編譯成小程序目標代碼的能力

Github：

https://github.com/Meituan-Dianping/mpvue

官網：

http://mpvue.com/

3、Tina.js 一款輕巧的漸進式微信小程序框架

 

特性： 輕盈小巧。 極易上手，保留 MINA (微信小程序官方框架) 的大部分 API 設計；不管你有無小程序開發經驗，均可以輕鬆過渡上手。 漸進加強，既有狀態管理器，也有路由加強，還能夠本身編寫插件。

Tina.js 開源框架地址：

https://github.com/tinajs/tina

四、組件化開發框架wepy

WePY 是一款讓小程序支持組件化開發的框架，經過預編譯的手段讓開發者能夠選擇本身喜歡的開發風格去開發小程序。框架的細節優化，Promise，Async Functions的引入都是爲了能讓開發小程序項目變得更加簡單，高效。

特性：

類Vue開發風格

支持自定義組件開發

支持引入NPM包

支持Promise

支持ES2015+特性，如Async Functions

支持多種編譯器，Less/Sass/Styus、Babel/Type、Pug

支持多種插件處理，文件壓縮，圖片壓縮，內容替換等

支持 Sourcemap，ESLint等

小程序細節優化，如請求列隊，事件優化等

Github地址:

https://github.com/Tencent/wepy

官網地址：

https://tencent.github.io/wepy

五、前端框架weweb

weweb是一個兼容小程序語法的前端框架，你能夠用小程序的寫法，來寫web應用。若是你已經有小程序了，經過它你能夠將你的小程序運行在瀏覽器中。

特性： 跨平臺，一套代碼多端運行（小程序、h五、將來直接打包成安卓、ios app也不是夢) 自帶經常使用組件，完美繼承了小程序內置組件 兼容小程序rpx語法，使頁面更容易適配各類機型

地址:

https://github.com/wdfe/weweb

三．【工具】

小程序開發工具

一、圖片處理工具Jinaconvert

 

Jinaconvert能夠幫你把圖片處理成各類須要的格式，你只須要在 Jinaconvert 上選擇你須要的格式類型，再將圖片文件上傳至便可。

工具網站地址：

https://jinaconvert.com/cn/

二、單位轉換工具postcss-px2units

將px單位轉換爲rpx單位，或者其餘單位的PostCSS插件。 postcss-px2units就可使用簡單的配置，輕鬆實現轉換。並且該插件能夠將px轉換爲任意你想轉換的單位，好比rem。

地址：

https://github.com/yingye/postcss-px2units

三、騰訊雲上傳插件qcloud-upload

基於nodejs的騰訊雲上傳插件 支持自定義文件前綴、覆蓋及非覆蓋上傳方式

地址：

https://github.com/yingye/qcloud-upload

四、二維碼工具weapp.qrcode.js

在微信小程序中，快速生成二維碼 可自定義二維碼內容、寬高、糾錯級別。此外，還支持生成不一樣先後景色的二維碼。

地址：

https://github.com/yingye/weapp-qrcode

微信小程序腳手架工具 wxdad

一款微信小程序腳手架工具，幫助你快速開發微信小程序應用。目前有兩個功能： 快速構建初始項目架構。 把 wxdad 語法快速編譯成 wxml 和 wxjs 文件，幫助開發者急速開發。

地址：

https://gitee.com/lisniuse/wxdad

五、小程序圖標工具wx-charts

基於 canvas 繪製、體積小巧的微信小程序圖表工具。

支持圖表類型：

餅圖 pie

圓環圖 ring

線圖 line

柱狀圖 column

區域圖 area

雷達圖 radar

地址：

https://github.com/xiaolin3303/wx-charts

六、小程序開發、微信公號管理系統RhaPHP

RhaPHP微信平臺管理系統，支持多公衆號管理，小程序開發，APP接口開發，平臺反文旁蟲立且快速簡潔易用。靈活的擴展應用機制，具備容易上手，幾乎融合微信接口，簡單的調用對二次開發與開發擴展應用模塊大大提升開發效率，下降企業商家運營成本。擴展應用模塊化，機制靈活，代碼簡單並快速上手。基於THINKPHP5強力內核驅動與LAYUI前端框架，支持 Linux/Windows/Mac。

官方網站：

https://www.rhaphp.com/

七、即速應用：適合技術小白的小程序開發工具

可視化操做，直接拖拽組件生成頁面 提供大量可套用的模板 可將代碼打包下載，直接對接到小程序的開發工具 下載下來後的代碼能夠任意編輯 複雜的功能仍然須要專業程序員二次開發

官網：

http://www.jisuapp.cn/

附：微信小程序開發者文檔官網地址

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html