小程序简介

Posted 笨笨！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序简介相关的知识，希望对你有一定的参考价值。

一．小程序简介

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及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会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行
以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。

1、pages字段 -- 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前的小程序页面定义在哪个目录下
2、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.微信支付功能实现

1、申请微信支付。小程序认证以后，可以在小程序后台，微信支付菜单栏，申请微信支付。填写企业信息和对公账户，微信支付会打一笔随机金额到对公账户，输入金额完成验证后，在线签署迁移，即完成了微信支付的申请流程。
微信支付申请完，会发送微信支付商户号，商户平台用户名密码等信息到注册者邮箱。

2、配置小程序密钥。小程序后台设置页，点击生成，管理员验证二维码后，会随机生成AppSecret。请妥善保管好Appsecret，不要明文存储于服务器，AppSecret用于和微信服务器交互。比如获取用户的openid接口就需要用到.

3、设置密钥和下载证书
用申请微信支付获得的用户名和密码，登录商户平台(pay.weixin.qq.com)，在账户中心，API安全中下载证书和设置密钥。
密钥是32位，设置以后需要妥善保管，因为无法查看密钥，所有微信支付相关的接口都会使用这个密钥加密。
4、配置HTTPS服务器 小程序的前端是使用微信提供的框架开发，但是后台依然是开发者自己的服务器。小程序发起的是HTTPS请求，意味着小程序开发者必须配置HTTPS服务器。配置HTTPS服务器之前，先要获取证书，证书可以向相关机构购买，腾讯云目前可以向用户提供免费的证书。
5、微信支付流程
微信支付有多种支付方式，包括刷卡支付，公众号支付，扫码支付，APP支付，所有微信支付的接口都可以到官方找到。小程序是在微信里调起支付的，其实是公众号支付，关于公众号支付的详细文档可以这里找到：http://bbs.html51.com/f-37-1/。所有公众号支付相关的链接都可以在此链接找到，开发者首先需要大概了解这些接口。

6、小程序调起微信支付，用的是小程序微信支付接口wx.requestPayment，该接口的详细描述可以查看小程序的微信支付API。
这个接口中的package和timeStamp参数是从开发者的第三方服务器返回的，package是第三方服务器从统一下单接口回复中获得。
接口中其他的参数，appId，noceStr，signType以及paySign则由小程序这边存储或者计算而得。

支付：前提是你要开通的有微信支付功能，需要商户号，appid，appsecret,

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

流程（预计耗时：1-5天）:

1、填写申请信息

2、经过微信支付审核

3、查收开户邮件

4、验证打款金额

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加密后生成一串签名值。

 

1、必须开通支付，并且有备案的域名 和 配置 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. 小程序开发工具

【小程序开发框架】

一．【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

二．【开发框架】

1、官方框架MINA

小程序提供的开发框架为MINA框架，它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套Java API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力，快速构建一个应用。

地址：

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

2、美团小程序框架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

4、组件化开发框架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

5、前端框架weweb

weweb是一个兼容小程序语法的前端框架，你可以用小程序的写法，来写web应用。如果你已经有小程序了，通过它你可以将你的小程序运行在浏览器中。

特性： 跨平台，一套代码多端运行（小程序、h5、未来直接打包成安卓、ios app也不是梦) 自带常用组件，完美继承了小程序内置组件 兼容小程序rpx语法，使页面更容易适配各种机型

地址:

https://github.com/wdfe/weweb

三．【工具】

小程序开发工具

1、图片处理工具Jinaconvert

 

Jinaconvert可以帮你把图片处理成各种需要的格式，你只需要在 Jinaconvert 上选择你需要的格式类型，再将图片文件上传至即可。

工具网站地址：

https://jinaconvert.com/cn/

2、单位转换工具postcss-px2units

将px单位转换为rpx单位，或者其他单位的PostCSS插件。 postcss-px2units就可以使用简单的配置，轻松实现转换。而且该插件可以将px转换为任意你想转换的单位，比如rem。

地址：

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

3、腾讯云上传插件qcloud-upload

基于nodejs的腾讯云上传插件 支持自定义文件前缀、覆盖及非覆盖上传方式

地址：

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

4、二维码工具weapp.qrcode.js

在微信小程序中，快速生成二维码 可自定义二维码内容、宽高、纠错级别。此外，还支持生成不同前后景色的二维码。

地址：

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

微信小程序脚手架工具 wxdad

一款微信小程序脚手架工具，帮助你快速开发微信小程序应用。目前有两个功能： 快速构建初始项目架构。 把 wxdad 语法快速编译成 wxml 和 wxjs 文件，帮助开发者急速开发。

地址：

https://gitee.com/lisniuse/wxdad

5、小程序图标工具wx-charts

基于 canvas 绘制、体积小巧的微信小程序图表工具。

支持图表类型：

饼图 pie

圆环图 ring

线图 line

柱状图 column

区域图 area

雷达图 radar

地址：

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

6、小程序开发、微信公号管理系统RhaPHP

RhaPHP微信平台管理系统，支持多公众号管理，小程序开发，APP接口开发，平台反文旁虫立且快速简洁易用。灵活的扩展应用机制，具有容易上手，几乎融合微信接口，简单的调用对二次开发与开发扩展应用模块大大提高开发效率，降低企业商家运营成本。扩展应用模块化，机制灵活，代码简单并快速上手。基于THINKPHP5强力内核驱动与LAYUI前端框架，支持 Linux/Windows/Mac。

官方网站：

https://www.rhaphp.com/

7、即速应用：适合技术小白的小程序开发工具

可视化操作，直接拖拽组件生成页面 提供大量可套用的模板 可将代码打包下载，直接对接到小程序的开发工具 下载下来后的代码可以任意编辑 复杂的功能仍然需要专业程序员二次开发

官网：

http://www.jisuapp.cn/

附：微信小程序开发者文档官网地址

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

 

以上是关于小程序简介的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序简介

微信小程序 开发,uni-app 开发简介

入门系列 微信小程序简介

小程序如何开发属于自己的一款小程序

小程序如何开发属于自己的一款小程序

小程序简介