2016-09-28 16:56:49 Zoe_sj 阅读数 1053
  • 微信支付开发-微信公众号开发12-微信开发php

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

    27848 人正在学习 去看看 秦子恒
       **微信小程序开发教程文档(包括搭建环境)**

从微信小程序的开发文档我们可以知道,微信应用开放的服务和组件包含如下:
视图容器:视图(View)、滚动视图、Swiper
基础内容:图标、文本、进度条
表单组件:按钮、表单等等
操作反馈
导航
媒体组建:音频、图片、视频。
地图
画布
文件操作能力
网络:上传下载能力、WebSocket
数据:数据缓存能力
位置:获取位置、查看位置
设备:网络状态、系统信息、重力感应、罗盘
界面:设置导航条、导航、动画、绘图等等
开放接口:登录,包括签名加密,用户信息、微信支付、模板消息

                      **环境搭建**

开发工具下载地址:http://pan.baidu.com/s/1dEXmVjr

接下来我把安装顺序以及遇到的问题在此详细介绍一下。(接下来按照此步骤安装即可成功(wind7版))

下载微信小程序开发工具0.7.0版本。上面云盘里有。因为0.9.0版本有登陆验证,直接安装一直登陆不上,一直提示please bind your wechat account to the appid first,下载0.7.0版本后直接安装,安装过程很简单,选择安装目录下一步就可以了,安装成功后登陆进入程序出现,需要微信扫码登录,登录后成功出现如下界面,然后退出。
然后下载0.9.0版本,云盘里也有。下载后直接覆盖安装就可以了(要覆盖安装),安装后先不用打开开发工具,需要下载三个js破解文件替换掉我们安装程序的对于目录的对应文件。
下载下图的三个文件
这里写图片描述
分别找到下面三个目录替换对应文件即可
package.nw\app\dist\components\create\createstep.js
package.nw\app\dist\stroes\projectStores.js
package.nw\app\dist\weapp\appservice\asdebug.js
替换文件后即可登录成功了,登录后界面如下
这里写图片描述
那么我们直接点击添加项目,点击后界面
这里写图片描述
因为我们没有内测账号,这个appid可以随便输入,项目名称,及开发目录就随便写了。
这里写图片描述
这里写图片描述
填好信息后点击添加项目
这里需要下载一个demo,上面云盘里面有。然后将demo里面的文件,注意不是demo,放到创建的项目里面。不然会报错。
如下图的错误
这里写图片描述
出现错误是因为我们缺少了一些文件。这时我们可以把之前下载的demo下载下来,然后拷贝demo里面的文件,注意不是demo这个文件夹。
动态图我放到前面了。
这里写图片描述
这里写图片描述
重启
这里写图片描述
这时就可以看到demo了。如果想做出自己的小程序,可以去看看开发文档。下面是地址链接:
简易教程:http://wxopen.notedown.cn/?t=1474537660904
微信小程序组件:http://weixin-xiaochengxu.shukaiming.com/component/scroll-view.html?t=1474537659739
开发者工具文档:http://wxopen.notedown.cn/devtools/devtools.html
常见问题:http://wxopen.notedown.cn/qa/qa.html
抢先看:微信官方发布的微信应用号(小程序)设计规范:http://www.woshipm.com/ucd/418190.html
微信小程序开发教程:https://xituqu.com/508.html

2018-05-03 17:46:13 ssh456 阅读数 415
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

首先申请一个小程序,打开开发文档进行开发

先创建登录页面的文件夹如下所示


之后开始搭建页面,在login.wxml文件中

代码如下,具体的标签可以参考微信开发小程序的文档介绍

<view class='container'>
<view class='header'>
<text>评教系统——学生端</text>
</view>
<form bindsubmit="formSubmit" bindreset="formReset">
  <view class='section'>
    <text>学号:</text>
    <input type='number' name='no' value='1635050222' placeholder='请输入学号' />
  </view>
  <view class='section'>
    <text>密码:</text>
    <input password='true' name='pwd' value='123456' />
  </view>
  <view class='section'>
  <button type='primary' form-type='submit'>登录</button>
  </view>
</form>
  
</view>

在login.wxss文件中设置样式

.header{
  font-weight: bold;
}
form{
  width: 100%;
  /* border: solid 1px #0f0;  */
}
.section{
  margin: 50rpx auto;
}
input{
  height: 100rpx;
  border: solid 1px #ccc;
}

接下来就是表单提交时发出的事件,在login.js文件中

formSubmit:function(e){
    // console.log(e.detail.value);
    wx.request({
      url: 'https://www.zhangsan.top/pingjiao/index.php/student/api/login', //仅为示例,并非真实的接口地址
      data: {
        username:e.detail.value.no,
        password: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        // console.log(res.data)
        //缓存
        wx.setStorage({
          key: "student",
          data: res.data
        });
        //页面跳转
        wx.redirectTo({
          url: '../teachers/teachers'
        })
      }

最后的页面效果如图所示



2016-11-26 20:04:29 u012309389 阅读数 122
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

消息的接收

微信中的消息分为以下几个种类
1.普通文字消息
2,图片消息
3.视频消息
4.音频消息
5.地理位置
6.事件推送
其中事件推送包括订阅与取消订阅,view类型菜单的点击事件等
微信的消息发送机制发送的xml文档信息,所以我们在后台接收时应注意
当用户给公众号发送消息时,微信会将消息转发给我们在基础配置时填写的url地址中,后台接受消息的JAVA代码如下:
controller
	@RequestMapping("token")
	@ResponseBody
	public void token(TokenVo token, TextMessage text,
			HttpServletResponse response, HttpServletRequest request) {
		try {
			if ("".equals(Constants.ECHOSTR)) {
				if (null != token.getTimestamp() && null != token.getNonce()
						&& null != token.getEchostr()
						&& null != token.getSignature()) {
					if (tokenService.token(token, logger)) {
						Constants.ECHOSTR = token.getEchostr();
						logger.info("已启动");
						response.getWriter().write(token.getEchostr());
						return;
					} else {
						logger.info("启动失败!");
						return;
					}
				} else {
					logger.info("缺少关键值!");
					return;
				}
			} else {
				response.setCharacterEncoding("UTF-8");
				String str = messageService.processRequest(request);
				response.getWriter().write(str);
			}
		} catch (JsonParseException e) {
			// TODO Auto-generated catch block
			logger.error("系统异常 >>", e);
		} catch (JsonMappingException e) {
			// TODO Auto-generated catch block
			logger.error("系统异常 >>", e);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			logger.error("系统异常 >>", e);
		} catch (DocumentException e) {
			// TODO Auto-generated catch block
			logger.error("系统异常 >>", e);
		}
	}
MessageService
	@Transactional
	public String processRequest(HttpServletRequest request) throws JsonParseException, JsonMappingException, IOException, DocumentException{
		String message = "";
		Map<String, String> requestMap = MessageUtil.parseXml(request);
		String fromUserName = requestMap.get("FromUserName");
		String toUserName = requestMap.get("ToUserName");
		String msgtype = requestMap.get("MsgType");
		if(msgtype.equals(MessageUtil.RESP_MESSAGE_TYPE_TEXT)){
			//收到文字信息
		}else if(msgtype.equals(MessageUtil.REQ_MESSAGE_TYPE_IMAGE)){
			//收到图片信息
		}else if(msgtype.equals(MessageUtil.REQ_MESSAGE_TYPE_EVENT)){
			//事件
			String event = requestMap.get("Event");
			if(MessageUtil.EVENT_TYPE_SUBSCRIBE.equals(event)){
				//订阅
				wechatUserService.saveByOpenid(fromUserName);
			}else if(MessageUtil.EVENT_TYPE_UNSUBSCRIBE.equals(event)){
				//取消订阅
				wechatUserService.deleteByOpenid(fromUserName);
			}else if(MessageUtil.EVENT_TYPE_CLICK.equals(event)){
				//点击事件
				
			}
		}
		return message;
	}
	
MessageUtil
	public static final String RESP_MESSAGE_TYPE_TEXT = "text";

	public static final String RESP_MESSAGE_TYPE_MUSIC = "music";

	public static final String RESP_MESSAGE_TYPE_NEWS = "news";

	public static final String REQ_MESSAGE_TYPE_TEXT = "text";

	public static final String REQ_MESSAGE_TYPE_IMAGE = "image";

	public static final String REQ_MESSAGE_TYPE_LINK = "link";

	public static final String REQ_MESSAGE_TYPE_LOCATION = "location";

	public static final String REQ_MESSAGE_TYPE_VOICE = "voice";

	public static final String REQ_MESSAGE_TYPE_EVENT = "event";

	public static final String EVENT_TYPE_SUBSCRIBE = "subscribe";

	public static final String EVENT_TYPE_UNSUBSCRIBE = "unsubscribe";

	public static final String EVENT_TYPE_CLICK = "CLICK";

	public static final String EVENT_TYPE_SCAN = "SCAN";

	private static XStream xstream = new XStream(new XppDriver() {
		public HierarchicalStreamWriter createWriter(Writer out) {
			return new PrettyPrintWriter(out) {
				boolean cdata = true;

				@SuppressWarnings({ "unused", "rawtypes" })
				public void startNode(String name, Class clazz) {
					super.startNode(name);
				}

				protected void writeText(QuickWriter writer, String text) {
					if (cdata) {
						writer.write("<![CDATA[");
						writer.write(text);
						writer.write("]]>");
					} else {
						writer.write(text);
					}
				}
			};
		}
	});

	@SuppressWarnings("unchecked")
	public static Map<String, String> parseXml(HttpServletRequest request) throws IOException, DocumentException {
		Map<String, String> map = new HashMap<String, String>();
		InputStream inputStream = request.getInputStream();
		SAXReader reader = new SAXReader();
		Document document = reader.read(inputStream);

		Element root = document.getRootElement();
		List<Element> elementList = root.elements();
		for (Element e : elementList)
			map.put(e.getName(), e.getText());
		inputStream.close();
		inputStream = null;
		return map;
	}
以上就是微信开发中的消息接收
2017-04-24 13:59:07 qq_38125123 阅读数 1024
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序开发常见问题FAQ

微信小程序遇到问题怎么办?遇到微信小程序方面的问题,该去哪里提问呢?一起来看看第九程序为您整理的微信开发者社区开发常见问题FAQ吧~在文中,您可使用「CTRL+F」,输入关键词来快速找寻您需要的答案。

Q:就算引入了es6-promise ios9 ios8 也无法使用Promise 但是也不报错,打印Promise 显示null,安卓没事。

A:谢谢反馈,迟点我们会上个 ES6 支持版本解决。

 

Q:现在picker-view触发bindchange要在滑动结束后,有时候还没滑完,就点确定按钮或者跳转页面,但是bindchange没有触发,就没有获取到数据。

A:谢谢反馈,下一版优化。

 

Q:wx.createAudioContext造成内存泄漏。
从列表页进入内页,内页在onLoad中执行wx.createAudioContext(‘myAudio’);
多次执行“返回列表页(通过返回按钮),进入内页”,在进入内页后   模拟器会有报错,手机实测会阻塞接口请求。

A:多谢反馈,应该是多次进入后,重复注册了多个 emitter 事件问题,先记录了。

 

Q:wx.upload()接口错误,本地测试wx.upload()访问借口是否要将接口url添加到小程序后台?
A:开发工具上测试时候可以在项目页面选择不校验安全域名,手机上测试时候,打开调试模式,默认不校验安全域名。

其他情况下,都会校验安全域名,安全域名包括了上传文件的校验。

 

Q:wx.chooseImage ,返回res里始终有一张或多张重复的。选择了4张完不一样的图,返回的结果里有一张是重复的,实际只能取到3个有效的 tmp_文件地址。

A:感谢反馈。这个问题只会在开发者工具中出现,下个版本会修复。

 

Q:wx.request() 请求后应该有返回头信息,建议在 success 和 complete 均加入 response headers 返回头信息。

A:收到,我们会规划这个需求。

 

Q:微信小程序的默认编码是什么?

A:UTF8

 

Q:在浏览器测试接口的时候完全没问题,当放到wx.request中请求就会丢失session.
A:wx.request 是通过客户端接口发起的HTTPS请求,不是浏览器的ajax,所以没有session  需要开发者自己记录和标记登录状态。

 

Q:小程序swiper移动内容不加载。

A:已知问题,下个版本 fix。

 

Q:请问小程序里微信支付可以实现找人代付吗?

A:目前不能。

 

Q:wx.showToast() 的 OBJECT.icon 应该增加 fail。

A:后续会增加。

 

Q:微信是否可以开放出NFC功能相关API?

A:是个好建议,已记录下来。

 

Q:带参数二维码达到10w后,是再也不能生成了?还是会按照时间顺序自动覆盖掉之前生成的,保持总量10w?

A:是不能再生成新的二维码了。

 

Q:小程序用户端的bug,苹果机出现“打开失败,无法打开小程序:加载失败:101”

A:谢谢反馈,这个是一个已知的问题,我们会尽快修复。

 

Q:socket为什么测试版能用,正式版不能用啊?

A:请检查mp.weixin.qq.com后台的 WSS 域名配置是否正确。因为开发版不做域名合法性校验。

 

Q:小程序支持Echarts吗?
A:不支持,需要自己实现,或者参考一些开源库。

例如:https://github.com/xiabingwu/chartjs-wechat-mini-app

2018-07-17 14:34:13 jky_yihuangxing 阅读数 2286
  • 微信支付开发-微信公众号开发12-微信开发php

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

    27848 人正在学习 去看看 秦子恒
修改官方swiper样式

从微信官方微信开发文档中心复制swiper 代码块。傻瓜式教程

wxml定义

<view class="wrap">
    <swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{{imgUrls}}">  
            <swiper-item>  
                 <image src="{{item}}" class="slide-image" width="100%" height="150" ></image>  
            </swiper-item>  
        </block>  
    </swiper>  
   <!--重置小圆点的样式  -->
    <view class="dots">  
        <block wx:for="{{imgUrls}}">  
            <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>  
        </block>  
    </view>  
</view>


wxss定义样式
.wrap {
  height: auto;
  position: relative;
  width: 100%;
}

.swipers {
  height: 350rpx;
  width: 100%;
}

.slide-image {
  display: block;
  width: 100%;
  height: 100%;
}

/*用来包裹所有的小圆点  */

.dots {
  width: 156rpx;
  height: 36rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 320rpx;
  bottom: 20rpx;
}

/*未选中时的小圆点样式 */

.dot {
  width: 26rpx;
  height: 26rpx;
  border-radius: 50%;
  margin-right: 26rpx;
  background-color: white;
}

/*选中以后的小圆点样式  */

.active {
  width: 26rpx;
  height: 26rpx;
  background-color: coral;
}
赋值

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    currentSwiper: 0,
    autoplay: true
  },
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  }
})  

效果图:

这里写图片描述

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