2017-05-01 16:41:08 y_f_raquelle 阅读数 3537
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12237 人正在学习 去看看 翟东平

微信公众平台开发者文档:http://mp.weixin.qq.com/wiki/home/index.html


首先申请一个微信公众开发测试账号:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login


申请后会提供appID和appsecret,你需要在自己的代码中添加接口配置的处理。

但此处URL必须为一个公网地址,且使用80端口,这就涉及到之前讲到的公网映射的方式。通常使用ngrok,注册后获得authtoken并配置,使用ngrok http <port>即可将指定端口映射到公网80端口。

接口配置的java示例:(参考Journey的博客

@WebServlet(urlPatterns = "/wx", name = "wxHouseKeeperServlet")  
public class HouseKeeper extends HttpServlet {  
    public static final String TOKEN = "mzmzo";  
  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        try {  
            // 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带参数  
            String signature = request.getParameter("signature");// 微信加密签名(token、timestamp、nonce。)  
            String timestamp = request.getParameter("timestamp");// 时间戳  
            String nonce = request.getParameter("nonce");// 随机数  
            String echostr = request.getParameter("echostr");// 随机字符串  
            PrintWriter out = response.getWriter();  
            // 将token、timestamp、nonce三个参数进行字典序排序  
            String[] params = new String[] { TOKEN, timestamp, nonce };  
            Arrays.sort(params);  
            // 将三个参数字符串拼接成一个字符串进行sha1加密  
            String clearText = params[0] + params[1] + params[2];  
            String algorithm = "SHA-1";  
            String sign = new String(  
                    Hex.encodeHex(MessageDigest.getInstance(algorithm).digest((clearText).getBytes()), true));  
            // 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信  
            if (signature.equals(sign)) {  
                response.getWriter().print(echostr);  
            }  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }     
}  

此处TOKEN与网页中填写的Token一致即可

接下来配置“网页授权获取用户基本信息


注意填写时不用加http://,只填写域名即可。

完成后扫描下方二维码即可关注自己的公众测试号,网页中会显示关注用户的Openid。

下载微信Web开发工具,即可模拟手机调试


完成登录和绑定后,开发者就可以开始调试微信网页授权,在地址栏直接输入URL

示例: https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl%3Dhttp%3A%2F%2Fmm.dianping.com%2Fweixin%2Faccount%2Fhome

这里appid填写之前注册后得到的,redirect_uri指向自己的公网域名下的url,response_type为code,scope为snsapi_base表示静默授权,state填写uri后的mapping。注意这里的redirect_uri和state可能需要urlencode。








2019-11-13 23:03:39 u013205428 阅读数 17
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12237 人正在学习 去看看 翟东平

很多新手在开始微信开发的时候,总是配置不上验证的接口,为什么呢?因为它要占用80端口,自己却不会映射到其他端口上面。这里就简单举两个例子来进行内网穿透吧,近期比较方便的内网穿透工具:1.natapp 2.花生壳。
1.natapp
这个是有免费使用期限的,过期之后需要付费才能继续使用,但是这个URL是固定不变的
2.花生壳
这个URL是动态变的,但是却是免费的。
以上两款都可以将80端口映射到其他端口来访问到自己项目中设置的微信后台地址。

以java语言写的项目为例:
如果是单个springboot项目的话,即你的项目启动的端口就是需要映射的端口。如果是springcloud这样的微服务项目的话,你的项目中gateway(网关)的服务端口即是你需要映射的端口,因为是在这块进行的各个服务端口的转发。

然后再来讲解一下微信公众号测试号的配置方法:
测试号页面
如上图所示,URL部分就是你通过natapp或者花生壳穿透完给出的URL,你必须要先打开natapp或者花生壳来启动这个URL穿透才能够使用这个URL,注意是到端口号为止,这个URL后面的如/sc-deputy/wx/token/sign是springboot或者springcloud项目的requestMapping地址。这里要注意的是一定是requestMapping而既不是postMapping又不是getMapping,因为微信公众号验证是用Get方法验证的,但是微信公众号接收信息是用的Post方法。所以用requestMapping可以使两者均接收,然后再各自做相应的方法封装进行处理即可。

Token这里你写的是什么,在进行后台验证的时候就写上相对应的值就行。

以我最近做的项目端口为例:
springcloud启动项目名称
这里我使用的是springcloud框架,然后我只需要在gateway服务里面将各个服务进行端口配置好再转发出去就行,我的微信公众号是写在了8011这个服务项目端口下的,但是我在配置内网穿透的时候必须要将80端口穿透到8040端口,而不是8011端口。 这样就能访问到后台的各个服务系统了,然后走你微信放置的服务系统的mapping地址就行了。
微信后台地址

2016-09-28 17:29:36 whzhaochao 阅读数 4536
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12237 人正在学习 去看看 翟东平

写在前面

在学习HelloWorld之前首先需要破解微信开发工具,前面一篇有相关破解教程:http://blog.csdn.net/whzhaochao/article/details/52691550

IDE结构

项目结构

上图是微信开发工具自动生成的一个HelloWorld,微信小程序的开发、调试都在这个工具中完成,相比于eclipse、Idea之类的Idea,小程序显示功能比较少,没多少菜单。

编辑

编辑菜单中是存放代码的,可以创建文件及文件夹、编辑代码,还有代码提示功能虽然不是很强大。值得注意的是修改代码后,文件上会有一个绿色小点,保存后会消失,修改代码需要编译后才能生效。

调试

调试
调试菜单主要是查看代码运行效果,微信小程序应该只能在微信和这个开发工具中运行了。这个调试窗口功能和chrome的调试窗有点区别,Console、Soruce、Network都和chrome的大体一样,
Storage用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
Appdata 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。
Wxml这个和Chrome的Elemnets功能比较相似,可以看到页面的HTML结果和CSS样式,Chrome中的事件、盒子模型和其它都是没有的

项目

项目
这个要是用户发布小程序和真机预览用的,可惜账号没有权限,无法真实体验一下

代码结构

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

这个app.wxss可以看到是全局的css文件,在这个文件个定义的css样式,其它所有页面都可以使用

app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.json是小程序的全局配置文件,这里的配置会传递给其它所有页面,具体有哪些配置,每个配置的作用可以阅读官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052047016

app.js

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

app.js 可以看作是小程序的生命周期文件,具体说明参看官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html?t=1475052055990

utils/util.js

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

util.js是自动生成的时间格式化工具在其它页面可以通过

var util = require('../../utils/util.js')

引用

index.wxml index.js index.wxss

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxml可看作是一个页面的视图文件,可以看作是HTML文件
index.wxss 可以看作是页面的样式文件,可以看作是css文件
index.js 可以看到是页面的生命周期文件,主要是页面生命周期、事件回调、业务处理等
值得注意
index.wxss和index.js 在index.wxml中不需要手动导入,通过文件名匹配,所以在建立文件时应尽量按个规则来

logs

这个目录下的和index下的一样的结果,只不过是显示日志文件,可以删除的

2017-08-31 22:15:44 hjd199464 阅读数 6793
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12237 人正在学习 去看看 翟东平

官方示例

index.wxml

<view class="page">
    <image style="width: 750rpx; height: 1000rpx; background-color: #ffffff;"  src="{{src}}"></image>
</view>

750rpx:小程序定义的宽度

index.js

var imgPath=''
Page({
  data: {
    src: imgPath
  }
})

在Page()外可以定义变量,此处需要注意,若Page中有多个data,以最后一个data为准

页面

页面组成:提示信息+扫码按钮+图片

index.wxml

<view>
  <text>扫码查看二维码内容</text>
  <button>请扫描二维码</button>
</view>

<view class="page">
  <image style="width: 750rpx; height: 1000rpx; background-color: #ffffff;" src="{{src}}"></image>
</view>

页面展示如下
这里写图片描述

红框处是有一个image的空间,只是颜色设置为白色
src接收到Page中data的src的值”,在代码中,使用的是rpx的单位,此处自动转为px

调用扫码

index.js

var imgPath=''
Page({
  scanningCode:function(event){
    wx.scanCode({
      success: (res) => {
        console.log(res)
      },
      fail: (res) => {
        console.log(res)
      },
      complete: (res) => {
        console.log(res)
      }
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    src: imgPath
  }
})

给button加上点击方法
index.wxml

<button bindtap="scanningCode">请扫描二维码</button>

至此,就能够点击button,打开扫码,然后读出扫码信息。
注意 :
1、此次要有AppId才能扫出结果,否则会提示错误
2、外链接需要先在开发者平台配置,且要使用https协议

获取扫码结果

扫码后,结果如下

console

Object {errMsg: "scanCode:ok", result: "https://xxxxxx", scanType: "QR_CODE", path: "", charSet: "UTF-8"}

真正的结果存在result中

更换图片地址

index.js

scanningCode:function(event){
    wx.scanCode({
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.result
        })
      }
    })
  }
}

至此,当扫码得到二维码中图片地址时,就可以在image中显示图片

加入loading

由于访问的是外链接,不可避免的存在延迟,优化用户体验,在加载图片时,加入loading遮罩层

index.js

scanningCode:function(event){
    wx.scanCode({
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.result
        }),
        wx.showLoading({
          title:'正在加载',
          mask:true
        })
      }
    })
  }

加入遮罩层后,希望在图片加载完的时候,遮罩层就隐藏掉
加入loading,效果如下
这里写图片描述

遮罩层隐藏

wx.hideLoading()

图片加载完成事件

<image bindload="hideLoading"></image>

结合

index.wxml

<view>
  <text>扫码查看二维码内容</text>
  <button>请扫描二维码</button>
</view>

<view class="page">
  <image style="width: 750rpx; height: 1000rpx; background-color: #ffffff;" src="{{src}}" bindload="hideLoading"></image>
</view>

index.js

Page({
    hideLoading:function(event){
        wx.hideLoading()
    },
    ...
})

至此,图片加载时,有loading提示,加载完成后,loading提示消失

图片加载完成后隐藏提示信息和按钮

在view中加入hidden

<view hidden="{{scanHidden ? true : false}}">
  <text>扫码查看二维码内容</text>
  <button bindtap="scanningCode">请扫描二维码</button>
</view>

初始化view是否隐藏

var imgPath=''
var hiddenView=false
Page({
    data: {
        src: imgPath,
        scanHidden:hiddenView
    },
    ...
})

当图片加载完成,隐藏view

Page({
    hideLoading:function(event){
        wx.hideLoading()
        this.setData({
          scanHidden:true
        })
    }
})
2017-02-22 15:15:18 bobolnear 阅读数 241
  • 微信公众平台深度开发v2.0第6季——微信WEB开发、手机...

    “微信公众平台深度开发Java版 v2.0”系列课程共有6季,使用JAVA语言,系统讲解微信公众平台订阅号、服务号官方列出的全部功能接口,包括:自定义菜单、个性化菜单(按需定制菜单)、群发消息、客服消息(有限次消息推送)、模板消息接(无限次消息推送)、微信网页开发(微信WEB开发、微信游戏)、微信JSSDK开发、用户管理、获取用户基本信息、网页授权获取用户基本信息(通过WEB得到用户信息)、二维码(临时二维码、永久二维码)、事件推送、接收普通消息、被动回复用户消息,等知识点。 以及,针对微信公众号开发的服务端架构设计方案。课程以微信公众号开发视角,讲解JAVA开发微信公众号所需的框架、第三方工具。 购买套餐还赠送经典微信开发课程——[微信公众号_独立知识点]环境搭建。该课程针对各种复杂的网络环境,讲解如何构建开发环境,已解决“没有服务器”、“没有固定IP”等开发者遇到的窘境。 课程采用独立知识点讲解,一个知识点,一组课程,真正做到“简单、高效、”以短的时间、实现的学习。更多课程信息请访问CSDN。网址:http://edu.csdn.net/lecturer/631 “微信公众平台企业号开发Java版”陆续上线。 详情 qq2326321088

    12237 人正在学习 去看看 翟东平

============================

By rambo

一、简介

微信小程序,轻应用,用完就走。

二、开发工具

开发工具其实是用js开发的。Electron、Nodejs等先制作一个固定的桌面程序,里面嵌入空的浏览器内核,比如chrominum,然后优化程序界面和提供本地调用程序的接口。这样的工具可以远程验证(微信二维码)、可以直接发布不用编译。微信开发工具采用的react + flux架构。

神级应用 hello world

1.创建项目

  • 后自动出现的这些文件组成编程界里最经典的一个应用-hello world。

2.程序结构


- app.js整个程序的入口js文件:onLaunch方法在程序初始化时调用,实现程序的逻辑层和数据层。
- json文件用来定义全局的一些配置参数。

{
  "pages": [ // 定义一些页面的位置,这样程序才能找到这些页面
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",  // 下拉背景字体、loading 图的样式,仅支持 dark/light
    "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
    "navigationBarTitleText": "techzto", // 导航栏标题文字内容
    "navigationBarTextStyle": "black" // 导航栏标题颜色,仅支持 black/white
  }
}
  • wxss全局的样式定义:实现程序的view视图层
  • wxml文件全局的样式定义:实现程序的view视图层
  • 左边按钮【编辑】、【调试】、【项目】、【编译】、【后台】、【缓存】、【关闭】待用到时在一一解锁技能,现在先来看看创建的项目在微信上的表现。

3.预览


  • 至此你就可以在微信上看到效果了。

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