2019-06-03 13:29:08 weixin_44283571 阅读数 123
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

微信小程序开发之页面传值,主要是讲对象传值。

发送界面:

Page({  
      data: {
       comment:{name:'username', password:'password'}  
     },
onTouch: function(event) {   
  console.log(event)   
   wx.navigateTo({ 
    url: '../post/post?comment=' + JSON.stringify(this.data.comment)   
    })  
 }
 })

接收界面:

Page({
  data: { 
   comment: [],   
        },
    onLoad: function(options) {  
      var that = this;   
      console.log("接收到的参数是comment="+options.comment);  
       this.data.comment = JSON.parse(options.comment);  
      this.setData({    
       comment: JSON.parse(options.comment)
      })   
 }
 })

打印内容:接收到的参数是comment={“name”:“username”,“password”:“password”}

1.其中JSON.stringify与JSON.parse是需要注意的重点其作用是:

stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
parse(string): 将 JSON 字符串转化成对象,并返回该对象。

2.如果出现这个错误:
在这里插入图片描述
同时经我实验出现这个错误的原因也可能是传递的数值容量过大导致数据丢失而出现错误。
比如:这是我请求的数据在这里插入图片描述
这是我请求到的数据在这里插入图片描述
可以看到数据已经丢失了一部分进而出错。
最后其实我也是刚接触微信小程序不久,同时也借博客记录一下学习过程。话说我一个学通信工程的为什么来搞微信小程序

2017-08-30 18:00:07 zhuming3834 阅读数 3183
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

之前做小程序的时候就使用过页面的传值,但是一直没写写成博客。今天有个网友问我页面怎么传值,我就写写下来,让他去看看。
之前做iOS开发的时候就有很多页面传值的应用,什么正向传值,反向传值,跨页面传值等。实现的方式有:通知,本地储存,公开属性,代理,单例等。
那么小程序有哪些呢?

小程序页面传值的方式

/*          
 *  页面传值:1.正向传值:上一页面 -->  下一页面
 *              1.url传值
 *              2.本地储存
 *              3.全局的app对象
 *          2.反向传值:下一页面 -->  上一页面
 *              1.本地储存
 *              2.全局的app对象
 */

这里正向传值有3种,反向传值有2种,如有遗漏欢迎补充。
这里的url传值只能是正向传值,其他的本地储存和全局的app对象既可以正向传值也可以反向传值。

项目结构

pages
  -- Apage  // 页面A
  -- Bpage  // 页面B
app.js
app.json
app.wxss

效果图

这里写图片描述

正向传值的实现

url传值

url传值,希望你已经看了wx.navigateTo(OBJECT)
这里写图片描述
这里说了页面路劲可以像GET请求一样拼接参数,那么怎么获取这个参数呢?
这个不知道大家发现没,在每个页面的.js文件里面都默认会生成生命周期的几个方法,其中:

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {

},

这个是待有参数options的。这里就需要利用它了。

A页面代码

var goodsid3 = 'A2B3'
wx.navigateTo({
  url: '../Bpage/index?goodsId=' + goodsid3,
})

B页面代码

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  // 这里是获取 url里面的参数
  var goodsid3 = options.goodsId;
  this.setData({
    AtB3: goodsid3
  })
},

本地储存

小程序-数据缓存这里大家自己去看。这里不做详细说明。

A页面代码

var goodsid1 = 'A2B1'
wx.setStorageSync('goodsid1', goodsid1);

B页面代码

var goodsid1 = wx.getStorageSync('goodsid1');
this.setData({
  AtB1: goodsid1
})

全局的app对象

这个大家看了小程序新建项目时生成的代码就知道怎么用了。

A页面代码

var app = getApp();
app.dataA2B = 'A2B2';

B页面代码

var app = getApp();
var goodsid2 = app.dataA2B;

反向传值的实现

本地储存

B页面代码

var goodsid = 'B2A1'
wx.setStorageSync('B2A', goodsid);
// 返回上一页
wx.navigateBack();

A页面代码

/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
  var goodsid = wx.getStorageSync('B2A');
  this.setData({
    dataBtA1: goodsid
  })
},

全局的app对象

这个大家看了小程序新建项目时生成的代码就知道怎么用了。

B页面代码

var app = getApp();
app.dataB2A = 'B2A2';

A页面代码

var app = getApp();
/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
  var b2a = app.dataB2A;
  this.setData({
    dataBtA2: b2a
  })
},

全部代码

app.js

App({
  onLaunch: function() {
    //调用API从本地缓存中获取数据
  },
  dataA2B: '',
  dataB2A: ''
})

A页面

wxml

<view>我是页面A</view>
<view>页面B传递给页面A的数据1:{{dataBtA1}}</view>
<view>页面B传递给页面A的数据2:{{dataBtA2}}</view>
<button bindtap="btnClick">跳转到页面B</button>

js

// pages/Apage/index.js
/*          
 *  页面传值:1.正向传值:上一页面 -->  下一页面
 *              1.url传值
 *              2.本地储存
 *              3.全局的app对象
 *          2.反向传值:下一页面 -->  上一页面
 *              1.本地储存
 *              2.全局的app对象
 */  
/*    
pages
  -- Apage  // 页面A
  -- Bpage  // 页面B
app.js
app.json
app.wxss
 */
// 获取app.js  全局对象
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 页面B 传递给 页面A的数据
    dataBtA1: '',
    dataBtA2: ''
  },
  // 页面跳转点击事件
  btnClick: function(){
    // 正向传值 页面传值的 第一种方式
    var goodsid1 = 'A2B1'
    wx.setStorageSync('goodsid1', goodsid1);
    // 正向传值 页面传值的 第二种方式
    app.dataA2B = 'A2B2';
    // 正向传值 页面传值的 第三种方式
    var goodsid3 = 'A2B3'
    wx.navigateTo({
      url: '../Bpage/index?goodsId=' + goodsid3,
    })
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 反向传值  第一种方式
    var goodsid = wx.getStorageSync('B2A');
    // 反向传值  第二种方式
    var b2a = app.dataB2A;
    this.setData({
      dataBtA1: goodsid,
      dataBtA2: b2a
    })
  },
})

B页面

wxml

<view>我是页面B</view>
<view>页面A传递给页面B的值1:{{AtB1}}</view>
<view>页面A传递给页面B的值2:{{AtB2}}</view>
<view>页面A传递给页面B的值2:{{AtB3}}</view>
<button bindtap="backClick">反向传值:页面B传值给页面A</button>

js

// pages/Bpage/index.js
// 获取app.js  全局对象
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 接收页面A 传递给页面B的值
    AtB1: '',
    AtB2: '',
    AtB3: ''
  },
  // 页面B 返回页面A 按钮点击事件
  backClick: function(){
    // 反向传值 页面传值的 第一种方式
    var goodsid = 'B2A1'
    wx.setStorageSync('B2A', goodsid);
    // 反向传值 页面传值的 第二种方式
    app.dataB2A = 'B2A2';
    // 返回上一页
    wx.navigateBack()
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 正向传值 页面传值的 第一种方式  获取传递的值
    var goodsid1 = wx.getStorageSync('goodsid1');
    // 正向传值 页面传值的 第二种方式  获取传递的值
    var goodsid2 = app.dataA2B;
    // 正向传值 页面传值的 第三种方式  获取传递的值
    var goodsid3 = options.goodsId;
    this.setData({
      AtB1: goodsid1,
      AtB2: goodsid2,
      AtB3: goodsid3
    })
  },
})

总结

关于页面传值,其实也就是搞清楚需求的前提下,利用已经掌握的技术来实现,只是这个应用是用来页面传值。

url传值

我们有时为了浏览器不缓存一些文件,我们在文件后面加上了时间戳,文件还是一样的;或者我们在已经打开的网页后面自己像GET请求方式那样添加参数,eg: https://www.baidu.com?baidu=李彦宏,和打开百度https://www.baidu.com页面还是一样的。

本地存储

我们一般是存储一些信息在本地,但是这个有存也有取,尽然可以存进去,我们只需要在需要的地方存取数据就行。这个还可以实现跨页面传值。

全局app对象

这个就是要搞清楚全局的概念和单例了。作为小程序开发,看看每次新建小程序项目时自动生成的代码就知道这个怎么用了。
至于以后的浏览器端的开发就需要自己去实现了。

总的来说页面传值基本就这,两个方向,三大类。搞清楚各自的特点就很好操作了。以后做浏览器端的项目开发时就很好处理了。

2019-10-28 19:21:20 weixin_43587472 阅读数 155
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

wxml页面:

<form bindsubmit='formsubmit'>
<view class='Type'>
  <van-cell title="类型" is-link>
  <picker name="vtype" bindchange="bindTypeChange" value="{{TypeIndex}}" range="{{Types}}">
    <view class="selectIndex1">{{Types[TypeIndex]}}</view>
  </picker>
  </van-cell>
</view>
<!-- button按钮 -->
<button class="issue-btn" type="default" form-type='submit'>按钮</button>
</form>

js页面:

Page({
data: {
    Types: ["宣传片", "广告片", "纪录片", "短视频"],
    TypeIndex: 0,
},
//获取下标
bindTypeChange: function (e) {
    console.log('picker account 发生选择改变,携带值为', e.detail.value);
    this.setData({
      TypeIndex: e.detail.value
    })
  },
//表单提交按钮
formsubmit: function (e){
	var type = this.data.Types[this.data.TypeIndex];
//打印出来,看是否获取成功了
	console.log(' type :', type);
}
wx.redirectTo({
      url: '/pages/payOrder/Contract/contract',
    })
})

来看效果
选择类型为纪录片:
在这里插入图片描述
Console控制台打印结果:
在这里插入图片描述

2018-10-11 16:07:38 SunshineBlog 阅读数 444
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

假设把A页面的值传给B页面:

首先是A页面传值相关的:

页面设计:

<view class='content' wx:for='{{menuList}}' wx:for-index="parentIndex">
  <view class='item' data-parentIndex='{{parentIndex}}' data-index='{{index}}' wx:for='{{item}}' bindtap='muenSubClick' data-introduce='{{sub}}' wx:for-item='sub'>{{sub.name}}</view>
</view>

js页面:

var app = getApp();//这一句在传下标的时候很重要哟
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //menuList:""
    menuList: [
      [{
          name: '菜单1',
          url: '../navigateTo/navigateTo',
          content: '我是菜单一'
        },
        {
          name: '菜单2',
          url: '../logs/logs',
          content: '我是菜单二'
        },
        {
          name: '菜单3',
          url: '../movie/movie',
          content: '我是菜单三'
        },
        {
          name: '菜单4',
          url: '../userinfo/userinfo',
          content: '我是菜单四'
        }
      ],
      [{
          name: '菜单5',
          url: '121',
          content: '我是菜单五'
        },
        {
          name: '菜单6',
          url: '121',
          content: '我是菜单六'
        },
        {
          name: '菜单7',
          url: '121',
          content: '我是菜单七'
        },
        {
          name: '菜单8',
          url: '121',
          content: '我是菜单八'
        }
      ],
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //使用appjson设置值
    this.setData({
      menuList: app.globalData.menuList,
    });
  },
  muenSubClick: function(res) {
    console.log(res.target.dataset);
    var subInfo = res.target.dataset.introduce //获取菜单信息
    var content = JSON.stringify(subInfo) //转换为json对象
    var url = subInfo.url; //获取跳转路径
    //跳转页面后有返回键
    wx.navigateTo({
      url: url+'?subInfo=' + content  //传对象
    })

    //传下标1
    // var index=res.target.dataset.introduce.index;//获取当前点击菜单的下标
    // wx.navigateTo({
    //   url: url + '?subInfoIndex=' + index
    // })
    
        //传下标 2
    // var dataset = res.target.dataset; //情况比较特殊,主要取里面的两个下标
    // wx.navigateTo({
    //   url: url + '?parentIndex=' + dataset.parentindex + '&index=' + dataset.index
    // })

    // //本地存储
    // wx.setStorage({
    //   key: 'subInfo',
    //   data: content,
    // })
    // wx.navigateTo({
    //   url: url
    // })
  }
})

B页面获取值:

页面:

<!--pages/navigateTo/navigateTo.wxml-->
<view>{{introduce.name}}</view>
<view>{{introduce.content}}</view>

js文件:

// pages/navigateTo/navigateTo.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    introduce: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    //传对象
    var content = JSON.parse(options.subInfo);

    //传下标 1   传下标以这一种方法为主
    // var content = app.globalData.menuList[options.subInfoIndex]
    // console.log(content);

    //传下标 2
    // var parentIndex = options.parentIndex;
    // var index = options.index;
    // console.log(options)
    //var content = app.globalData.menuList[parentIndex][index]

    this.setData({
      introduce: content
    });

    //使用本地存储
    //   var that = this;
    //   //获取本地存储处对象
    //   wx.getStorage({
    //     key: 'subInfo',
    //     success: function(res) {
    //       console.log(res.data);
    //       that.setData({
    //         introduce: JSON.parse(res.data),
    //       });
    //     },
    //   })
  }
})

ps:注意在使用传下标方法传值的时候需要在小程序的app.js文件里面配置数据源,如下图所示:

更多绑定数据源的方法见:https://blog.csdn.net/SunshineBlog/article/details/83003577

 
  globalData: {
    userInfo: null,
    menuList: [
      [{
          name: '菜单1',
          url: '../navigateTo/navigateTo',
          content: '我是菜单一'
        },
        {
          name: '菜单2',
          url: '../logs/logs',
          content: '我是菜单二'
        },
        {
          name: '菜单3',
          url: '../movie/movie',
          content: '我是菜单三'
        },
        {
          name: '菜单4',
          url: '../userinfo/userinfo',
          content: '我是菜单四'
        }
      ],
      [{
          name: '菜单5',
          url: '121',
          content: '我是菜单五'
        },
        {
          name: '菜单6',
          url: '121',
          content: '我是菜单六'
        },
        {
          name: '菜单7',
          url: '121',
          content: '我是菜单七'
        },
        {
          name: '菜单8',
          url: '121',
          content: '我是菜单八'
        }
      ],
    ]
  }

 

2017-07-15 00:54:57 snakeMoving 阅读数 3131
  • 微信支付开发-微信公众号开发12-微信开发php

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

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

之前没有接触过微信开发,出来工作后第一份工作是做微信开发,我的任务只是写一个接口。

进入正题,微信开发,本文的微信开发是指微信公众号开发,本文从微信开发的最基础部分做一个简单的记录,并且附上自己写的一段代码。

openid:openid其实就是一个数据库主键,是腾讯为每个公众号的唯一标识

userinfo:其实就是用户信息,这些可以授权获取到的信息及其有限,就是用户名性别地址之类的

其实微信开发文档写得很清楚了,本人啰嗦了点所以记下来了

一般我们进入一个公众号,它可能会让我们授权,其实这样他就获取到我们的信息,他可以保存到数据库,作为会员信息,这样就省去了注册的一个步骤

首先获取授权这一步,其实是开发者后台获取用户code的一个手段,code可以干嘛?code可以作为一个钥匙,通过微信提供的接口,携带着开发者的appid和秘钥,以及code

就可以获取到用户的openid和accesstoken,其实获取到这2个没什么卵用,然后你可以利用openid和accesstoken通过另外一个接口获取到用户信息,这就有用啦。

以下附上自己写的菜得抠脚的代码,还忘个各位大佬完善一些细节

package wechat.Common;

/**
 * Created by sam on 2017/7/13.
 */

/**
 * 授权后重定向的回调链接地址,请使用urlEncode对链接进行处理
 * 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),
 * snsapi_userinfo (弹出授权页面可通过openid拿到昵称、性别、所在地。
 * 并且,即使在未关注的情况下,只要用户授权,也能获取其信息)
 */
public class URLBean {
    public static final String appid = "这个写自己的";
    public static final String appsecret = "这个写自己的";
    public static final String GETCODE
            = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE#wechat_redirect";
    public static final String GETACCESSTOKENANDID
            = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code";
    public static final String REFRESHTOKEN
            = "https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN ";
    //需要用get访问,https协议
    public static final String USERINFO
            = "https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN";
    public static final String BASEURL = "/grant/getCode?visitUrl=VISIT";
    public static final String PROJECT_URL = "http://2691670703.tunnel.qydev.com/WeChat";
}
package wechat.Common;

import org.apache.log4j.Logger;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.net.URLEncoder;

/**
 * Created by sam on 2017/7/13. 
 */
public class WechatFilter implements Filter{

	private Logger logger = org.apache.log4j.Logger.getLogger(this.getClass());

    public void init(FilterConfig filterConfig) throws ServletException {
        //
    }

    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest)servletRequest;
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        HttpSession session = request.getSession();
        String openId = (String) session.getAttribute("openid");
        String URL = request.getRequestURI();
        if(isNeedGrant(URL)){
			if(openId!=null){
				filterChain.doFilter(request,response);
			}else{
				String queryString = request.getQueryString();
				String redirect_url = "";
				if(queryString!=null) {
					redirect_url = request.getRequestURL().toString()+"?"+queryString;
				}else {
					redirect_url = request.getRequestURL().toString();
				}
				String url  = URLBean.PROJECT_URL+URLBean.BASEURL.replace("VISIT",URLEncoder.encode(redirect_url, "UTF-8"));
				String target = URLBean.GETCODE.
						replace("APPID",URLBean.appid).
						replace("SCOPE","snsapi_userinfo").
						replace("REDIRECT_URI", url);
				response.sendRedirect(target);
			}
		}else{
			filterChain.doFilter(request,response);
		}

    }

    public void destroy() {
        //
    }
	/**
	 * 需要判断是否拉取openid不然它会无限循环进来
	 */
	public boolean isNeedGrant(String url){
		//判断是否是正在走向我定义好的接口
//		if (url.contains("/grant/getCode")){
//			return true;
//		}
//		return false;
		return true;
	}
}
package wechat.Common;

import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import wechat.Entity.WeChatUser;
import wechat.Service.WeChatUserService;

import java.net.URLDecoder;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Created by sam on 2017/7/13.
 */
@Controller
@RequestMapping("/grant")
public class Grant {
	private Logger logger = Logger.getLogger(this.getClass());
	@Autowired
	private WeChatUserService weChatUserService;
	//Illegal character in scheme name at index 0
    @RequestMapping("/getCode")
    public void getCode(HttpServletRequest HttpServletRequest, 
    		HttpServletResponse httpServletResponse)throws Exception{
        //这里拉取code,然后重定向到获取openId和accessToken的地址
    	HttpSession httpSession =  HttpServletRequest.getSession();
    	String code = HttpServletRequest.getParameter("code");
    	String redirect_url = HttpServletRequest.getParameter("visitUrl");
    	redirect_url = URLDecoder.decode(redirect_url,"UTF-8");
    	String url = URLBean.GETACCESSTOKENANDID.replace("APPID", URLBean.appid).
    			replace("SECRET", URLBean.appsecret).replace("CODE", code);
    	String resp = HttpClientUtil.doGet(url);
    	AccessTokenOpenId ao = JsonUtils.jsonToPojo(resp, AccessTokenOpenId.class);
    	String openId = ao.getOpenid();
    	httpSession.setAttribute("openid", openId);
    	WeChatUser chatUser = weChatUserService.getWeChatUserByOpenId(openId);
    	if(chatUser==null) {
    		String userinfojson = HttpClientUtil.doGet(URLBean.USERINFO
    				.replace("ACCESS_TOKEN",ao.getAccess_token()).replace("OPENID", ao.getOpenid()));
    		chatUser = JsonUtils.jsonToPojo(userinfojson, WeChatUser.class);
    		weChatUserService.insert(chatUser);
    	}
    	httpSession.setAttribute("user",chatUser);
    	httpServletResponse.sendRedirect(URLDecoder.decode(redirect_url, "UTF-8"));//跳转用户最原始访问的连接
    }
 
}
里面有一些需要完善的地方,需要各位大佬自己修改一下,我写不出优雅的代码,就这样吧,仅此记录而已 --Sam

微信开发知识梳理

阅读数 132

微信小程序页面栈

阅读数 155

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