2018-09-29 11:19:20 ziwutong88 阅读数 3757
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27882 人正在学习 去看看 秦子恒

微信小程序原生开发 和 wepy 、 mpvue 对比

参考资料1

参考资料2

三者的开发文档以及介绍

三者简单的对比:

以下简单概括三者区别

微信小程序 mpvue wepy
语法规范 小程序开发规范 VueJs开发规范 类Vue开发规范
标签集合 小程序标签 html标签+小程序标签 小程序标签
样式标签 wxss sass,less,postcss sall,less,styus
组件化 无组件化机制 VueJs组件规范 自定义组件规范
多端服用 不可复用 支持转换为H5 支持转换为H5
自动构建 本身无自动构建 webpack构建 框架内自动构建
上手成本 全新学习 熟悉VueJs即可 VueJs和wepy
集中数据管理 不支持 使用Vuex实现 wepy-redux数据管理

小程序支持的是WXML + WxSS + JS这样的组合,所以,wepy和mpvue都是将文件构建到dist目录,转换为小程序支持的文件类型,然后将微信开发者工具指向dist目录下,进行调式开发的,并且两者都提供了热更新。

WePY

  • 一个类Vue开发风格的小程序框架

  • 特性:

    • 类Vue开发风格
    • 支持组件化开发
    • 支持NPM
    • 支持Promise,主动选择是否开启
    • 支持ES2015
    • 编译器:支持less/sass/TypeScript等开发
    • 小程序性能优化
    • 框架大小:24.3k + 8.9k
    • wepy-redux数据管理
  • 构建与编译工具:wepy-cli,编译配置:wepy.config.js

  • 项目目录结构:

      ├── dist                   小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
      ├── node_modules           
      ├── src                    代码编写的目录(该目录为使用WePY后的开发目录)
      |   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
      |   |   ├── com_a.wpy      可复用的WePY组件a
      |   |   └── com_b.wpy      可复用的WePY组件b
      |   ├── pages              WePY页面目录(属于完整页面)
      |   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
      |   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
      |   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
      └── package.json           项目的package配置
      └── wepy.config.json       项目的编译配置
      └── project.config.json    小程序开发工具的配置
    

WePY文件编译示意图

WePY组件实现示意图

WePY大概做了这些工作:

  • 编译代码为原生框架支持的形式
    • .wpy单文件开发简化文件目录
    • 优化数据绑定语法与性能
    • 优化时间绑定语法与性能
    • 优化代码复用,组件化代理原生的模板
    • 支持less/sass/typescript等,优化开发体验
  • 将大部分API promise化
  • 支持npm外部依赖,ESLink代码规范等

小结

因此,使用WePY开发小程序,出遵循WePY的语法外,

  • 仍可保留原生的开发方式,比如按原生自定义组件的方式开发,WePy会将.js/.json/.wxml原生不动复制到输出目录下,将.less编译为同名的.wxss
  • 对于继承自wepy.app/wepy.page/wepy.compinent的以.wpy为文件后缀名的,则数据赋值需要按照WePY的方式,必要时使用$apply,$nextTick,而不是setData,至于事件绑定语法、API调用,可根据喜好与需求,保留原生语法or使用WePY优化语法

mpvue

  • 命名意思解读:mp,nimi program的缩写,mpvue,Vue.js in mini program

  • 框架基于Vue.js核心,mpvue修改了Vue.js的runtime和compiler实现。使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。

  • 特性:

    • 组件化开发
    • 完整Vue.js开发体验,全部.vue单文件组件
    • Vuex数据管理方案
    • webpack构建机制:自定义构建策略、开发阶段hotReload
    • 支持npm
    • 使用Vue.js命令行工具vue-cli快速初始化项目
    • H5代码转换编译成小程序目标代码能力(可使用html开发)
  • 构建与编译工具:vue-cli,编译配置:build/

  • 配套设施

    • mpvue-loader
    • movue-webpack-target
    • postcss-movue-wxss
    • px2rpx-loader
    • 其他
  • 项目目录结构

      |--bulid              编译配置
      |--config             编译配置
      |--dist               小程序运行代码目录(该目录由编译生成)
      |--node_modules
      |--src                开发目录
      |  |--compinents      组件目录
      |  |  |--com_a.vue    组件a
      |  |  |--com_b.vue    组件b
      |  |--pages           页面目录
      |  |  |--index        index页面(默认会在src/main.js主入口生成page配置,路径为pages/index/main)
      |  |  |  |--index.vue  由其入口文件编译main.js后,生成index/main.js、index/main.wxml和index/main.wxss文件
      |  |  |  |--mian.js    页面默认入口文件(config属性会编译为页面配置文件index/main.json)
      |  |  └──other         other页面(默认会在src/main.js主入口生成pages配置,路径为pages/other/main)
      |  |  |  |--index.vue  由其入口文件编译mian.js后,生成other/mian.js、other/main.wxml和other/main.wxss文件
      |  |  |  |--mian.js    页面默认入口文件(config属性会编译为页面配置文件other/main.json)
      |  └──app.vue          小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json、app.wxss文件)
      └── static             静态文件,会直接被复制到dist/下
      └── package.json       项目webpack配置
      └── project.config.json 小程序开发工具的配置
    

mpvue原理

  • mpvue 保留了 vue.runtime 核心方法,无缝继承了 Vue.js 的基础能力
  • mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力
  • 修改了 vue 的建构配置,使之构建出符合小程序项目结构的代码格式: json/wxml/wxss/js 文件

小结

  • mpvue与WePY不同,除将代码编译为原生框架所支持的外,还支持使用html标签,因此可以增加代码复用性,比较适合需要web端、小程序端等多端支持的项目,尤其是已有VueJs实现的Web端的产品,需要快速开发一个小程序版本的需求场景;且该开发团队更熟悉Vue.js。
  • 熟悉mpvue,可以看看mpvue-weui:movue重写weui
  • web端与小程序如何代码复用?
    • 对于一般的容易转化的html标签,如div/p/ul/li等可以直接适应,让mpvue的编译器帮你完成转换,但对于如picker/checkbox/radio/switch/slider/progress/icon等这些与html标签不能简单对应的小程序原生组件,mpvue的建议是按小程序原生组件的用法,只不过事件绑定与变量动态赋值的语法要按mpvue的写法(mpvue使用手册有涉及,请别踩坑)
    • 基于上一点,Web端UI复用其实也只是局限于那些容易转换的标签,对于差异化较大的UI是需要按每个端的特性做修改的
    • 小程序的组件默认样式是weui风格,因此小程序一些组件与api功能,比如toast/loading/modal/actionsheet/picker,WEb端可以截住weui.js来完成
    • 小程序许多API,Web端可对应使用微信的js-sdk

特性对比

mpvue WePY 原生开发
开发特性 单文件组件 类Vue风格 每个页面有4个不同文件组成
组件化支持 支持,vue单文件组件 支持,同时可兼容原生自定义组件 模板(template),自定义组件
外部依赖npm 支持 支持 不支持
原生API Promise化 基本不支持,请求可以选用fly 大部分支持API均支持,选用 无,为回调函数
优化 优化了setData,npm资源不引用则不会占用体积 setData不可太频繁使用,需要控制图片资源大小,第三方资源不用需及时清理
less/sass/es6/typescript/eslint等 均支持 均支持 支持es6
自动化构建 vue-cli,webpack wepy-cli
数据统一管理 vuex,选用 wepy-redux,选用 全局数据globalData,Storage
Web H5支持 已上线H5页面转小程序,更改小部分平台差异代码和webpack配置可运行 可输出web版本,暂不适合投入生产 不支持
2018-02-03 09:43:54 yji534123343 阅读数 917
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27882 人正在学习 去看看 秦子恒
一、微信开发的整体介绍
开放平台:https://open.weixin.qq.com/
公众平台:https://mp.weixin.qq.com/
1、微信开发的种类
①移动应用开发
支持微信的分享、收藏、支付三大功能,原生开发的人员去使用的开发类别
②网站应用开发
网站支持使用微信账号进行注册和登录,从而来实现:提高用户的留存率,方便不同账号的统一(结合unionId)
③公众账号开发


④公众账号第三方平台
优势在于免繁琐设置,方便小白用户去使用。


2、公众账号开发
①服务号
主要偏向于给用户提供查询服务(招商银行、麦当劳。。)
显示在好友列表,每个月只能群发4条消息


②订阅号
主要偏向于给用户提供资讯(朝闻天下、Web前端。。)
显示在订阅号文件夹内,每天都可以群发1条消息


③小程序
2017年1月9号 (2007年1月9号 推出iphone)
基于微信的平台,ui提供了很多组件,js提供了很多接口


(微信官方的小程序:小程序示例,包含了微信官方封装好的组件、以及封装好的接口)


目标:万物互联 (IOT),  二维码
开放范围:(不包含个人)
http://www.wxapp-union.com/forum.php?mod=viewthread&tid=495


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


数据存储和服务器:
两种解决方案 ①腾讯云(不到100) ②godaddy


④企业号
主要是建立起 企业与人的关系,提供信息、和企业相关的定制功能


温馨提示:
1)如果想简单的发送消息,达到宣传效果,建议可选择订阅号;
2)如果想进行商品销售,进行商品售卖,建议可申请服务号;
3)如果想用来管理内部企业员工、团队,对内使用,可申请企业号。
4)订阅号可通过微信认证资质审核通过后有一次升级为服务号的入口,升级成功后类型不可再变。
5)服务号不可变更成订阅号。


3、九大类高级接口


语音识别接口
客服接口
OAuth2.0 网页授权接口
生成带参数的二维码接口
获取用户地理位置接口
获取用户基本信息接口
获取关注者列表接口
用户分组接口
上传下载多媒体文件接口


+ 微信支付
(十大类接口的使用,必须是认证过的服务号和订阅号才能使用)




4、正式环境的搭建
(公众账号-》订阅号)


购买自己的域名(万网、dnsPod、godaddy)
购买申请主机空间(新浪云、阿里云、腾讯云、大米云、godaddy、aws)
注册订阅号
登录到订阅号管理接口、服务器的配置、调用10大类接口


5、测试环境的搭建
(公众账号-》订阅号)


主机空间(新浪云)
注册订阅号
登录到订阅号管理接口、服务器的配置、调用10大类接口


6、注册订阅号
①填写邮箱、密码
②到邮箱中激活账号
③选择类型
④登记信息(个人、组织、媒体、企业。。)
⑤填写公众号的信息(名称、介绍、头像)






二、个人订阅号(jssdk)


1、实现功能:统计页面被访问的次数


分析:
①存储需要持久保存的数据
数据库、文件系统、内存中:fileSystem
②读写过程
读:file_get_contents($fileUrl);
写:file_put_contents($fileUrl,$content);


需要apache启动


2、新浪云storage


通过bucket管理我们的文件,如何访问?
saestor:// testbucket/count.txt




3、jsSDK的使用步骤
①绑定域名
②引入js文件
③注入接口(将使用接口的名称,写在config方法中jsAPIList这个数组中)
④在ready中调用接口
⑤在error中处理失败的异常情况






sample.zip有4个文件,
前两个文件都是用来存储数据的,jssdk.php进行网络请求以及数据的读写操作,sample.php文件主要完成接口的注入和调用


jssdk.php封装了2个方法get_php_file、set_php_file,如果部署在服务端,写文件会出现权限拒绝的问题。
①将存储文件 放到新浪云的bucket中
②修改读写文件的路径为 saestor://bucketName/**.php




require subscribe 需要订阅测试账号。




三、版本控制工具(git)


1、版本控制
记录一个或者多个文件内容变化,以便于未来查询指定的版本信息。


svn 集中式/git  分布式
①防止代码的丢失
②团队协作
③版本还原
④更好的管理代码


2、git介绍
用于代码的版本控制,使用方式:命令行/图形化


git(分布式版本控制工具)与github(托管开源项目的网站,托管项目的方式采用的是git)


3、自己使用git将项目上传到github


①申请github的账号 
https://github.com/
注册账号,在选择计划的时候选择continue,在编辑经验时选择skip跳过。
②去邮件激活账号
③start project 只需要指定repository的名称,点击create去创建。


④安装git
一路next,最后点击install安装 取消所有的勾选就可以了。
⑤启动git
到所有程序中,找到git,找到gitbash,点击启动


⑥基础命令
ls (list) 查看当前目录下的文件
clear 清除当前的屏幕信息
pwd (print the work directory)显示当前目录
mkdir web1609 在当前的路径中创建一个叫做web1609的目录
cd web1609 (change directory)
touch a.txt 创建一个叫做a.txt的一个文件


通过电脑中的文件系统找到文件,写上了hello git.


git的用法


git init 初始化仓库
git status 查看仓库的状态
git add a.txt 将a.txt添加到代码仓库
git commit -m '第一次提交'     添加到缓存区


配置上传到github上的用户信息:
git config --global user.name "web1609best"
git config --global user.email "web1609@vip.163.com"


设置完账号之后,重新提交到缓存区:
git commit -m '第一次提交'     添加到缓存区


将本地的代码设置它推送到github上的地址:
git remote add origin https://github.com/web1609best/web1609.git


将当前目录的git仓库推送到github对应的origin地址的master分支
git push origin master

















2016-11-15 11:38:46 qq_24091555 阅读数 20073
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27882 人正在学习 去看看 秦子恒

           由于项目需要,需要接触微信开发,并要调用微信的JS-SDK里面的接口。

       因为经验缺乏,我百度一下关于微信开发的资料,但收集的资料都不尽人意。网上的主流的微信开发是采用PHP开发的,而本人学的Java。所以对PHP微信开发只能看懂思路。更有的是,网上一些微信开发视频,也是和PHP有关的,关于用Java开发的甚少。

       无奈之下,我只好苦啃微信开发文档。大家都知道,微信官方给的开发文档真的有点那个啥,一个功能实现非要分几个地方来说,看完这块,又得点击另一个页面看完另一块,甚是麻烦。这样的设定也让我走了好多坑。

但功夫不负有心,在研究透了微信开发文档之后,我顺利在在项目中完成微信开发。现在我将微信开发的经验分享一下,希望对大家有所帮助。

       微信JS-SDK是微信公众号平台面向网页开发这提供基于微信内的网页开发工具包。接口大类分为:基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地址位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡劵和微信支付。一般使用频率高的就是分享接口、地理微信、微信扫一扫和微信支付。

接下来,我将主要讲解如何调用微信分享接口。

第一步,准备内网映射工具,ngrok。不清楚这个的同学可以去百度一下。https://ngrok.com为ngrok官网。要进行微信开发,内网映射工具是不可少。毕竟,我们程序员进行开发,要测试开发的产品是否能用,都先在自己的电脑跑一下。但由于ngrok的服务器在外国的,鉴于天朝的墙太高,访问可能不稳定。所以我推荐的是国内的natapp,免费和收费的都有,服务毕竟稳定可靠,只不过要想自定义二级域名就得交费成为VIP咯。

第二步,配置JS接口安全域名。登录要进行开发的公众号,点击公众设置--->功能设置。设置JS接口安全域名,要注意三点:①填写域名前面不需加上http://,例如你的域名是http://test.com,直接填写test.com即可;②域名默认80端口,只支持80和443端口,所以域名后面不能添加端口号。③该域名为你调用微信JS-SDK接口域名。

第三步,引用JS文件。在需要调用JS接口的页面引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js 。


第四步,通过config接口注入权限验证配置 。具体参数有什么用处,在截图都有注释讲解。其中jsApiList为我们要使用的接口,我在下面共引用了五个接口,分别为微信好友分享、QQ好友分享、腾讯微博分享、QQ空间分享和朋友圈分享。调用的都是分享的接口。至于其他接口列表,可以去微信开发文档那浏览一下。这里就不详说。

        第五步,在服务器生成相关参数传到调用JS-SDK页面,完成授权。这是最重要的一步。如上图所示,appId,timestamp,nonceStr,signature都为必填参数。下面我将会详细说说如何生成这些参数并传回页面。

appId为开发的微信公众号的AppID(应用ID),我们可以在登录微信公众号,在开发选项中点击基本配置来查看。

timestamp为系统生成的时间戳。


nonceStr为服务器随机生成的字符串。



signature为微信JS-SDK使用权限算法。在生成signature之前,我们要拿到jsapi_ticket。官方文档是这样解释的:


我们要注意三个地方。jsapi_ticket要缓存两个小时,每过两个小时,向微信那边请求一次。获取jsapi_ticket要通过access_token。那么我们该如何获取access_token呢?


从文档可以看出,access_token需要AppID和AppSercet两个参数。而且access_token和jsapi_ticket一样,有效期皆为两小时。这就要求我们服务器要缓存access_token和jsapi_ticket,当有效期一过,就重新请求。有的人采用是用数据库来存取这两个参数,而我采用的是用Quartz定时器。关于Quartz定时器的使用,可浏览我上篇博客《SSH与Quartz集成》,里面有关于Quartz的使用方法。

AppSercet可在与APPID同一页面获取。接下来,调用接口,获取access_token。



接下来,我们用access_token去获取jsapi_ticket。


获取jsapi_ticket,就可以进行生成签名。在此之前,先看一下官方文档的签名算法。



用代码实现。


第六步,传生成的参数给网页。



第七步,调用已授权的JS接口。


第八步,利用微信Web开发者工具调试,看看是否授权成功。(微信web开发者工具可在微信开发下载)。



2016-11-26 15:50:56 jinjin10086 阅读数 897
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27882 人正在学习 去看看 秦子恒

分享集成

现在的APP大都会包含分享部分,分享的集成平台也很多,如SharedSDK,友盟等等,但是这些分享都是统一实现差异化分享,进行多方的差异化配置进而实现相关的分享,但是我们开发时候有时候只需要进行最常用的微信分享就可以实现,所以学习原生的分享集成是有必要的,另外原生的分享由于实现特定的平台分享,集成包也比较小,有利于我们的APP实现瘦身,下面开始介绍分享的实现。

1,微信开放平台进行app注册(https://open.weixin.qq.com/),进行相关的注册,拿到appid

2,注册时候需要生成应用签名,可获取工具输入包名获取相关签名,注意安装的包必须是正式签名的包(即release,不是debug),资源地址:https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&lang=zh_CN

3,资源下载,资源地址同2,下载第一个android开发工具包即可。

4,下载解压得到libammsdk.jar拷贝到libs目录,同时添加依赖。

5,权限添加:

<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

6,注册应用到微信,一般建议在application的onCreate中完成,也可在入口activity的onCreate中完成。

private static final String Weixin_id = "appid";
public static IWXAPI WeixinAPI;
WeixinAPI = WXAPIFactory.createWXAPI(this, Weixin_id, true);
WeixinAPI.registerApp(Weixin_id);
7,分享实现:

微信分享可分享文字、图片、音乐、视频、网页等,这里介绍最常用的网页分享。

WXWebpageObject wxWebpageObject = new WXWebpageObject();
wxWebpageObject.webpageUrl = url;//设置跳转的url
final WXMediaMessage mediaMessage = new WXMediaMessage(wxWebpageObject);
mediaMessage.title = this.title;//设置标题
mediaMessage.description = this.content;//设置内容
mBitmap =  BitmapFactory.decodeStream(new URL(picPath).openStream());
Bitmap bitmap = Bitmap.createScaledBitmap(mBitmap,96,96,true);
mediaMessage.thumbData = BitmapToBytesUtil.Bitmap2Bytes(bitmap);//图片加工
SendMessageToWX.Req  req = new SendMessageToWX.Req();
req.transaction = "webpage";//分享类型为网页
req.message = mediaMessage;//分享的内容为上面的信息
req.scene = SendMessageToWX.Req.WXSceneSession;//设置分享到微信好友
req.scene = SendMessageToWX.Req.WXSceneTimeline;//设置分享到微信朋友圈
PigeonApp.WeixinAPI.sendReq(req);//发送请求
8,分享结果,创建类实现结果回调,代码如下:

public class WXEntryActivity extends Activity implements IWXAPIEventHandler {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        PigeonApp.WeixinAPI.handleIntent(getIntent(),this);
    }

    @Override
    public void onReq(BaseReq baseReq) {

    }

    @Override
    public void onResp(BaseResp baseResp) {
        String result = "";
        switch (baseResp.errCode) {
            case BaseResp.ErrCode.ERR_OK:
                result = "分享成功";
                break;
            case BaseResp.ErrCode.ERR_USER_CANCEL:
                result = "分享取消";
                break;
            case BaseResp.ErrCode.ERR_AUTH_DENIED:
                result = "分享被拒绝";
                break;
            default:
                result = "分享返回";
                break;
        }
        ToastUtils.getInstance(this).showToast(result,false);
        finish();
    }

}
根据回调结果进行相关的业务处理即可。

如遇到分享自动返回情况,则确定此处的签名是否是release版本。

2019-03-31 15:45:40 zhaohanqq 阅读数 175
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27882 人正在学习 去看看 秦子恒

在微信小程序中,像video这种原生组件是不支持下面这种方式绑定事件,

catch:tap

也不支持下面这种方式,

bind:tap 

只能写成

bindtap

微信开发资料大全

阅读数 107

没有更多推荐了,返回首页