Angularjs整合微信UI（weui）
作者：大猛
字体：[ ] 类型：转载 时间：
本文给大家推荐的是使用angularjs实现整合微信新推出的UI（weui）的全部过程，有相同需求的小伙伴可以参考下
不久前，微信推出了自己的一套UI，我看有很多开发者将其套用在了一些前端框架中，比如react、vue。最近自己在学习Angularjs，所以，也想把这个UI整合到这个框架，这几天试了一下，简单的套用了一个功能，现在分享给大家，分离做的不好，请高手指点。
有一定的Angularjs基础，并且了解ngRoute、ngAnimate的人群。
整合的时候，参照官方的演示页面，自己也做了一个演示页面，完全使用Angularjs做的，没有引用其它框架。下面先说明一下引入的文件。
使用angular.min.js 1.4.9
使用angular-route.min.js 1.4.9
使用angular-animate.min.js 1.4.9
使用weui.min.css 0.4.0
一开始想与官方的演示页面一样做一个单页面的，开发之后发现，把所有内容放到一个文件里显得杂乱，所以，使用了Angularjs的路由功能，把各个小功能独立成页面，在需要时加载进来。此处使用模板加载功能来实现。于是，导航页面代码就显示很干净，如果想要使用哪部分的功能代码，直接使用相对应的html页面及js脚本文件即可，方便、快捷。
下是导航页面的代码：
&!DOCTYPE html&
&html lang="en" ng-app="weuiapp"&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"&
&title&WeUI&/title&
&link rel="stylesheet" href="./css/weui.css" /&
&style type="text/css"&
width: 100%;
&body ng-controller="home"&
&div class="home" ng-if="homeShow"&
&div class="weui_grids"&
&a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock('button')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_button.png" alt=""&
&p class="weui_grid_label"&
&a href="#/cell" class="weui_grid js_grid" data-id="cell" ng-click="showBlock('cell')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_cell.png" alt=""&
&p class="weui_grid_label"&
&a href="#/toast" class="weui_grid js_grid" data-id="toast" ng-click="showBlock('toast')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_toast.png" alt=""&
&p class="weui_grid_label"&
&a href="javascript:;" class="weui_grid js_grid" data-id="dialog" ng-click="showBlock('dialog')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_dialog.png" alt=""&
&p class="weui_grid_label"&
&a href="javascript:;" class="weui_grid js_grid" data-id="progress" ng-click="showBlock('progress')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_progress.png" alt=""&
&p class="weui_grid_label"&
&a href="#/msg" class="weui_grid js_grid" data-id="msg" ng-click="showBlock('msg')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_msg.png" alt=""&
&p class="weui_grid_label"&
&a href="#/article" class="weui_grid js_grid" data-id="article" ng-click="showBlock('article')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_article.png" alt=""&
&p class="weui_grid_label"&
&a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" ng-click="showBlock('actionsheet')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_actionSheet.png" alt=""&
&p class="weui_grid_label"&
ActionSheet
&a href="#/icons" class="weui_grid js_grid" data-id="icons" ng-click="showBlock('icons')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_icons.png" alt=""&
&p class="weui_grid_label"&
&a href="#/panel" class="weui_grid js_grid" data-id="panel" ng-click="showBlock('panel')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_panel.png" alt=""&
&p class="weui_grid_label"&
&a href="javascript:;" class="weui_grid js_grid" data-id="tab" ng-click="showBlock('tab')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_tab.png" alt=""&
&p class="weui_grid_label"&
&a href="#/searchbar" class="weui_grid js_grid" data-id="searchbar" ng-click="showBlock('searchbar')"&
&div class="weui_grid_icon"&
&img src="./images/icon_nav_search_bar.png" alt=""&
&p class="weui_grid_label"&
&div class="view" ng-view ng-if="viewShow"&&/div&
&script type="text/javascript" src="./js/angular.min.js"&&/script&
&script type="text/javascript" src="./js/angular-animate.min.js"&&/script&
&script type="text/javascript" src="./js/angular-route.min.js"&&/script&
&script type="text/javascript" src="./js/toast.js"&&/script&
&script type="text/javascript" src="./js/example.js"&&/script&
以上代码大部分来自官方的首页代码，由于要使用Angularjs，所以增加了相应的属性，包括ngApp,ngController,ngClick,ngIf以及显示功能演示页面的ngView。
代码中，ngClick中使用了showBlock函数，参数是当前点击的功能字符串，这个函数的参数在使用路由功能后，没有使用，仅仅是在此函数中增加了隐藏与显示导航部分以及功能演示部分的代码，详情请查看下面的脚本代码。
angular.module('weuiapp', ['ngAnimate', 'ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'home',
templateUrl: ''
.when('/button',{
controller: 'button',
templateUrl: 'button.html'
.when('/cell', {
controller: 'cell',
templateUrl: 'cell.html'
.when('/toast', {
controller: 'toast',
templateUrl: 'toast.html'
.when('/msg', {
controller: 'msg',
templateUrl: 'msg.html'
.when('/article', {
controller: 'article',
templateUrl: 'article.html'
.when('/icons', {
controller: 'icons',
templateUrl: 'icons.html'
.when('/panel', {
controller: 'panel',
templateUrl: 'panel.html'
.otherwise({
redirectTo: '/'
.controller('home', function($scope) {
$scope.homeShow =
$scope.viewShow =
$scope.showBlock = function() {
$scope.homeShow =
$scope.viewShow =
.controller('toast', ['$scope', '$interval', toast])
.animation('.aweui-show', ['$animateCss', toastAnimate])
.animation('.home', ['$animateCss', function($animateCss) {
enter: function(element, doneFn) {
return $animateCss(element, {
from: { left: '100%', top: 0, opacity: 0 },
to: { left: 0, top: 0, opacity: 1 },
duration: .3
leave: function(element, doneFn) {
return $animateCss(element, {
from: { left: 0, top: 0, opacity: 1 },
to: { left: '-100%', top: 0, opacity: 0 },
duration: .3
.animation('.view', ['$animateCss', function($animateCss) {
enter: function(element, doneFn) {
return $animateCss(element, {
from: { left: '100%', top: 0, opacity: 0 },
to: { left: 0, top: 0, opacity: 1 },
duration: .3
leave: function(element, doneFn) {
return $animateCss(element, {
from: { left: 0, top: 0, opacity: 1 },
to: { left: '-100%', top: 0, opacity: 0 },
duration: .3
$scope.showBlock = function() {
$scope.homeShow =
$scope.viewShow =
这一段便是函数要实现的功能代码，分别控制变量homeShow以及viewShow来实现导航与功能演示两部分的显示与隐藏。
.animation('.home', ['$animateCss', function($animateCss) {
enter: function(element, doneFn) {
return $animateCss(element, {
from: { left: '100%', top: 0, opacity: 0 },
to: { left: 0, top: 0, opacity: 1 },
duration: .3
leave: function(element, doneFn) {
return $animateCss(element, {
from: { left: 0, top: 0, opacity: 1 },
to: { left: '-100%', top: 0, opacity: 0 },
duration: .3
以上是导航部分显示时的动画效果代码。导航部分初始化为绝对定位，让其在消失前先做一个向左移出显示区域，并且渐隐的动画。当查看完功能演示，回到导航时，进行动画反转。这里使用的ngAnimate的$animateCss服务，并且使用了此服务提供的进入事件enter以及移出事件leave。其它的动画功能与其相同。
$routeProvider
.when('/', {
controller: 'home',
templateUrl: ''
.when('/button',{
controller: 'button',
templateUrl: 'button.html'
.when('/cell', {
controller: 'cell',
templateUrl: 'cell.html'
.when('/toast', {
controller: 'toast',
templateUrl: 'toast.html'
.when('/msg', {
controller: 'msg',
templateUrl: 'msg.html'
.when('/article', {
controller: 'article',
templateUrl: 'article.html'
.when('/icons', {
controller: 'icons',
templateUrl: 'icons.html'
.when('/panel', {
controller: 'panel',
templateUrl: 'panel.html'
.otherwise({
redirectTo: '/'
这是路由服务，对应html中的a标签href属性，所以，此程序中没有使用showBlock函数的参数，已经没有用处了，此函数只是为了增加了动态效果而创造的。
下面，再来看看功能演示部分的页面代码。
&div class="page"&
&div class="hd"&
&h1 class="page_title"&Toast&/h1&
&div class="bd spacing"&
&a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showToast()"&点击弹出Toast&/a&
&a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showLoadingToast()"&点击弹出Loading Toast&/a&
&!--BEGIN toast--&
&div id="toast" ng-if="toastHide" class="aweui-show"&
&div class="weui_mask_transparent"&&/div&
&div class="weui_toast"&
&i class="weui_icon_toast"&&/i&
&p class="weui_toast_content"&已完成&/p&
&!--end toast--&
&!-- loading toast --&
&div id="loadingToast" ng-if="loadingToastHide" class="weui_loading_toast aweui-show"&
&div class="weui_mask_transparent"&&/div&
&div class="weui_toast"&
&div class="weui_loading"&
&div class="weui_loading_leaf weui_loading_leaf_0"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_1"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_2"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_3"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_4"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_5"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_6"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_7"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_8"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_9"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_10"&&/div&
&div class="weui_loading_leaf weui_loading_leaf_11"&&/div&
&p class="weui_toast_content"&数据加载中&/p&
这就是加载等待提示功能的演示页面代码，一共两种样式，其一，显示文字；其二，有一个加载等待的动画并且有提示文字显示。
页面有两个按钮，功能就是分别呼出这两种样式，每种样式呼出后，停留3秒后自动消失。
在导航页面的js中，有一个控制器和一个动画函数调用了此功能页面脚本代码中的函数，分别是控制器函数toast()以及动画函数toastAnimate()。脚本文件的代码如下。
//toast控制器
function toast($scope, $interval) {
$scope.toastHide = 0;
$scope.loadingToastHide = 0;
$scope.showToast = function() {
$scope.toastHide = 1;
$interval(function() {
$scope.toastHide = 0;
}, 3000, 1);
$scope.showLoadingToast = function() {
$scope.loadingToastHide = 1;
$interval(function() {
$scope.loadingToastHide = 0;
}, 3000, 1);
//显示与隐藏时的动画，使用ngAnimate中的$animateCss服务
function toastAnimate($animateCss) {
enter: function(element, doneFn) {
return $animateCss(element, {
from: { opacity: 0 },
to: { opacity: 1 },
duration: .3
leave: function(element, doneFn) {
return $animateCss(element, {
from: { opacity: 1 },
to: { opacity: 0 },
duration: .3
到此，导航和一个功能演示的页面就已经实现了。由于大部分UI是静态的，没有动态，所以只需要将官方的演示照搬即可。需要增加动态代码的，现在已只做了这一个，后续还会陆续增加至完成。
代码开源地址
代码已经上传至github上，感兴趣的朋友可以点击查看，代码同时也上传到个人的服务器上，说明中有链接地址，可以直接点击查看效果。
由于项目刚刚成立，很多东西没有完善，还有很多不如意的地方，请谅解。更希望能得到您的帮助与指正。
项目地址：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具关于微信支付遇到的哪些坑_AngularJS开源社区_ThinkSAAS
关于微信支付遇到的哪些坑
关于微信支付遇到的哪些坑
内容来源： 网络
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。1251人阅读
1.安装插件
&ionic plugin add /mrwutong/cordova-qdc-wxpay.git
controller.js
angular.module('starter.controllers', []).controller('MyCtrl', function($scope,PayService) {
$scope.wxpaytest= function () {
//参数说明：格式为JSON格式
//cb_success:调用成功回调方法
//cb_failure:调用失败回调方法
PayService.getJson().then(function(data){
if(data.status==&SUCCESS&){
var json = {
appid: data.appid,
noncestr: data.noncestr,
package: data.package,
partnerid: data.partnerid,
prepayid: data.prepayid,
timestamp: data.timestamp,
sign: data.sign
wxpay.payment(json, function(msg){
=JSON.parse(msg);
if(json.code==0){
alert(&支付成功返回页面&);
}, function(error){
=JSON.parse(error);
if(json.code ==-2){
alert(&用户不支付了，点击取消，返回APP&);
alert(&失败了&);
}catch(ex){
alert(ex);
});services.js
angular.module(&starter.services&,[])
.factory(&PayService&,function($q,$http){
getJson: function()
var r = $q.defer();
$http.get(&http://服务发布IP地址/ailpay.ashx?method=Unified&).success(function (data) {
r.resolve(data);
}).error(function (er) {
r.resolve(!1);
&index.html&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width&&
&title&&/title&
&link href=&lib/ionic/css/ionic.css& rel=&stylesheet&&
&link href=&css/style.css& rel=&stylesheet&&
&!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
&link href=&css/ionic.app.css& rel=&stylesheet&&
&!-- ionic/angularjs js --&
&script src=&lib/ionic/js/ionic.bundle.js&&&/script&
&!-- cordova script (this will be a 404 during development) --&
&script src=&cordova.js&&&/script&
&!-- your app's js --&
&script src=&js/app.js&&&/script&
&script src=&js/controllers.js&&&/script&
&script src=&js/services.js&&&/script&
&body ng-app=&starter&&
&ion-pane&
&ion-header-bar class=&bar-stable&&
&h1 class=&title&&支付测试&/h1&
&/ion-header-bar&
&ion-content&
&div ng-controller=&MyCtrl&&
&button class=&button button-block button-positive&
ng-click=&alipaytest()&&支付宝支付&/button&
&button class=&button button-block button-positive& ng-click=&wxpaytest()&&微信支付&/button&
&/ion-content&
&/ion-pane&
&/html&public void GetUnifiedOrder(HttpContext context)
string callback = context.Request[&callback&] == null ? &JSON_CALLBACK& : context.Request[&callback&].ToString();
string body = context.Request[&body&] == null ? &body& : context.Request[&body&].ToString();
string attach = context.Request[&attach&] == null ? &测试系统-支付平台& : context.Request[&attach&].ToString();
string totalFee = context.Request[&totalFee&] == null ? &1& : context.Request[&totalFee&].ToString();
string goods_tag = context.Request[&goodstag&] == null ? && : context.Request[&goodstag&].ToString();
string productId = context.Request[&productId&] == null ? && : context.Request[&productId&].ToString();
WxPayData data = new WxPayData();
data.SetValue(&body&, body);//商品描述
data.SetValue(&attach&, attach);//附加数据
data.SetValue(&out_trade_no&, WxPayApi.GenerateOutTradeNo());
data.SetValue(&total_fee&, totalFee);//总金额
data.SetValue(&time_start&, DateTime.Now.ToString(&yyyyMMddHHmmss&));//交易起始时间
data.SetValue(&time_expire&, DateTime.Now.AddMinutes(10).ToString(&yyyyMMddHHmmss&));//交易结束时间
data.SetValue(&trade_type&, &APP&);//交易类型
WxPayData result = WxPayApi.UnifiedOrderApp(data);//调用统一下单接口
string json = &NO&;
if (result.GetValue(&return_code&).ToString() == &SUCCESS&)
string prepay_id = result.GetValue(&prepay_id&).ToString();//获得统一下单接口返回prepay_id
string noce_str = Guid.NewGuid().ToString().Replace(&-&, &&);
var timestamp = WxPayApi.GenerateTimeStamp();
WxPayData dataReq = new WxPayData();
dataReq.SetValue(&appid&, &APP申请的Key&);//
dataReq.SetValue(&partnerid&, &APP申请的商户号&);//商户号
dataReq.SetValue(&noncestr&, noce_str);//随机字符串
dataReq.SetValue(&package&, &Sign=WXPay&);
dataReq.SetValue(&prepayid&, prepay_id);
dataReq.SetValue(&timestamp&, timestamp);
var sign = dataReq.MakeSignApp();
context.Response.Write(&{\&status\&:\&SUCCESS\&,\&appid\&:\&& + &APP申请的Key& + &\&,\&partnerid\&:\&&
+ &APP申请的商户号& + &\&,\&noncestr\&:\&& + noce_str + &\&,\&package\&:\&& + &Sign=WXPay&
+ &\&,\&prepayid\&:\&& + prepay_id + &\&,\&timestamp\&:\&& + timestamp + &\&,\&sign\&:\&& + sign + &\&}&);
(&Faile&, result.GetValue(&return_msg&).ToString());
context.Response.Write(callback + &({\&status\&:\&Faile\&})&);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：506651次
积分：11552
积分：11552
排名：第1054名
原创：612篇
转载：231篇
评论：105条
文章：10篇
阅读：20292
(43)(73)(48)(47)(22)(12)(22)(53)(48)(56)(57)(219)(102)(7)(1)(13)(22)}