2019-03-12 16:20:18 qq_38209578 阅读数 518
  • 微信小程序前端程序设计和JS入门到精通

    讲解微信小程序中前端程序的基础知识,涉及变量的定义和使用,对象、数组的的定义和使用,if条件语句和for循环语句的使用,事件的定义和使用,如何使用JSON数据格式的使用和实战,json对象的定义,普通json对象,json数组对象等;实战小程序中登陆功能的实现,如何获取用户的微信账号相关信息等 微信小程序商城15天从零实战课程 https://edu.csdn.net/course/detail/19437

    4147 人正在学习 去看看 黄菊华

本问主要介绍微信网页webapp开发过程中引入微信jssdk的坑

1.基本配置

毫无疑问,请参照官方文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
在这里插入图片描述
注:一般最容易出现问题的是步骤三

2.config配置失败的原因

2.1域名不一致

官方有错误排查的引导,还是无法解决,那么你问题最可能出现在url的回调问题
2.1.1https和http不一致导致签名错误
2.1.2返回的url与请求的url不一致,包含了域名除hash值外的字段。
eg:请求的接口的页面为为https://www.vitian.vip/
如上述例子,你生成签名的url就一定是https://www.vitian.vip/
注:请求页面的最后的/反斜杠,很容易被忽略

2.2引入的JS文件名称

引入的jssdk文件名称是https和http需要注意

3.实例

getJssdk:function() {
	// var url =""; // 此处为后台的接口
	$.ajax({
		url: url,
		type: 'POST',
		contentType: "application/json",
		// dataType: 'jsonp',//这里要用jsonp的方式不然会报错
		success: function(r) {
			var data = {};
			data.timestamp = r.signPackage.timestamp;
			data.nonceStr = r.signPackage.nonceStr;
			data.signature = r.signPackage.signature;
			data.appId = r.signPackage.appId;
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				appId: data.appId, // 必填,公众号的唯一标识
				timestamp:data.timestamp, // 必填,生成签名的时间戳
				nonceStr: data.nonceStr, // 必填,生成签名的随机串
				signature: data.signature,// 必填,签名
				jsApiList: [
					'getLocalImgData', 
					'checkJsApi',
					'previewImage',
					'openLocation',
					'getLocation',
					'chooseImage',
					'uploadImage',
					'downloadImage',
					'getLocalImg'
				] // 必填,需要使用的JS接口列表
			});
			wx.ready(function () {
				// vm._getLocation();
				// myVar = setInterval(function(){ vm._getLocation() }, 10000);
			});
			wx.error(function(res){
				console.log(res)
			});
		}
	});
	},
2018-03-27 10:49:30 bun12345 阅读数 1467
  • 微信小程序前端程序设计和JS入门到精通

    讲解微信小程序中前端程序的基础知识,涉及变量的定义和使用,对象、数组的的定义和使用,if条件语句和for循环语句的使用,事件的定义和使用,如何使用JSON数据格式的使用和实战,json对象的定义,普通json对象,json数组对象等;实战小程序中登陆功能的实现,如何获取用户的微信账号相关信息等 微信小程序商城15天从零实战课程 https://edu.csdn.net/course/detail/19437

    4147 人正在学习 去看看 黄菊华

      微信小程序自动切片生成布局软件是一款根据效果图像画画一样来设计微信小程序,自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高您的工作效率,减少前端布局的编写工作。

 

 

功能如下:

 

1.切片功能:原来手工写的这部分工作,可以用切片软件的方法来切。切好后,可以自动生成wxml,wcss,js文件。

2.文字识别功能:效果图上的文字可以通过自动文字自动识别识别出来,提高录入速度,减轻工作量。

3.存档功能:设计好的切片文件可以存档,以便下次编辑。只要有切片文件在,换了程序员也可以修改和编辑。


软件操作步骤说明:

1.在微信工作者工具中添加新页面的目录,添加新的页面;

2.打开切片软件,导入小程序效果图,设置好名称、.wxml、后台代码类型。再设置好页面设置中的四个路径参数;

3.通过拉框线设置好布局,设置好属性;

4.点工具栏上的刷新、生成、导出;


安装最低配置:

1. 支持操作系统:windows xp/vista/windows2003/win7/win8

2. IE, Firefox, Mathxon等浏览器

3. 512M RAM 内存,80G硬盘,100Mbps 网卡

4. .net4.5以上框架  


安装说明:

1. 先安装本软件,WIN7/WIN8建议不要装在c盘,安装完成后右键以管理员身份运行

2. 如果不能运行,请安装.net4.5框架,推荐下载地址:http://www.crsky.com/soft/4818.html


更多软件操作步骤可了解  http://www.ymznkf.com/new_view.aspx?cataid=33&id=542


2016-11-15 11:31:56 FutrueJet 阅读数 10406
  • 微信小程序前端程序设计和JS入门到精通

    讲解微信小程序中前端程序的基础知识,涉及变量的定义和使用,对象、数组的的定义和使用,if条件语句和for循环语句的使用,事件的定义和使用,如何使用JSON数据格式的使用和实战,json对象的定义,普通json对象,json数组对象等;实战小程序中登陆功能的实现,如何获取用户的微信账号相关信息等 微信小程序商城15天从零实战课程 https://edu.csdn.net/course/detail/19437

    4147 人正在学习 去看看 黄菊华

1、效果展示


2、原理:在app.json中配置tabBar属性

3、关键代码

"tabBar": {
    "color":"#666666",
    "selectedColor":"#06bd04",
    "list": [{
      "pagePath": "index",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/indexHL.png"
    },{
      "pagePath": "picDisplay",
      "text": "图片展示",
      "iconPath": "images/picDisplay.png",
      "selectedIconPath": "images/picDisplayHL.png"
    }]
  }

4、操作方法

  • 新建一个项目,打开app.json文件,将关键代码复制到"window":{},后面,注意window的大括号前加逗号,如下图


  • 配置tabBar属性值
 "tabBar": {
    //设置tabBar文字默认颜色
    "color":"#666666",
    //设置tabBar文字被选中是的颜色
    "selectedColor":"#06bd04",
    //tab列表,数组类型,改数组内至少要有两个但不大于5个的tab对象
    "list": [{
      //设置tab跳转页面链接
      "pagePath": "index",
      //设置tab上的文字
      "text": "首页",
      //设置tab上的默认图标
      "iconPath": "images/index.png",
      //设置tab被选中时的图标
      "selectedIconPath": "images/indexHL.png"
    },{
      "pagePath": "picDisplay",
      "text": "图片展示",
      "iconPath": "images/picDisplay.png",
      "selectedIconPath": "images/picDisplayHL.png"
    }]
  }

5、源代码获取方式
百度云链接:http://pan.baidu.com/s/1mh6CGIG
6、在使用tabBar过程中有遇到任何问题或者不明白的地方,欢迎添加我的微信号进行咨询,微信号:FutureJet 感谢您的支持!

2019-06-06 17:03:50 Xuan_m_o 阅读数 178
  • 微信小程序前端程序设计和JS入门到精通

    讲解微信小程序中前端程序的基础知识,涉及变量的定义和使用,对象、数组的的定义和使用,if条件语句和for循环语句的使用,事件的定义和使用,如何使用JSON数据格式的使用和实战,json对象的定义,普通json对象,json数组对象等;实战小程序中登陆功能的实现,如何获取用户的微信账号相关信息等 微信小程序商城15天从零实战课程 https://edu.csdn.net/course/detail/19437

    4147 人正在学习 去看看 黄菊华

第一次进行前端开发,经验总结,个人记录

使用语言 HTML5+CSS+PHP(不过由于需求方要求比较简单 并没有使用上PHP)

使用框架:WEUI

项目内容:微信公众号页面

总结:

1.菜鸟教程会讲述很多基本语法,所以html5、css、php等语言一些基本内容不懂可以去查阅学习一下,里面还有案例。

附上链接:https://www.runoob.com/

2.善于使用框架。

WEUI内有许多布局,可以在开发时候使用,如果是新手上路,对于布局不甚掌握可以参考它的网页源码(鼠标右键——检查/查看网页源代码),其次 使用框架可以减少一些代码量。

WEUI使用方法:https://github.com/Tencent/weui 这是WEUI的git开源代码,可以将其下载下来,在dist/style目录下将weui.css复制到你所开发的目录下,然后引用这个css就可以使用里面的样式了。

3.个人多加调试。

不直观调试是看不出来样式可行与否。

4.网页适配手机问题

 在开发界面,添加代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="style.css"/>

然后在style.css里添加如下代码:

@media only screen and (min-width: 1024px){
      body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
      body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
      body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
      body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
      body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
      body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
      body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 399px) {
      body {zoom: 1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
      body{zoom:1.125;}
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
      body {zoom: 1.17;}
}

然后根据网页在不同手机比例下的样子,进行调整,会出现一些组件在375px的手机显示屏下显示正常在320px手机显示屏下则过大,此时就根据320px屏幕的大小进行调整,比如:
@media only screen and (min-width: 320px) and (max-width: 359px) {
      body {zoom: 1.17;}
    body.long{
        width: 320px;
    }
    #length{
        height:300px;
    }
}
每一个@media后可以看做是一个界面独立的css,所以根据不同屏幕大小,得书写不同的样式。

5.关于横向布局的问题。

这个问题其实在刚开始开发的时候困扰了我很久,因为这个公众号的界面开发是我第一次接触并使用html5+css,也不知道如何自学。

这个问题解决方法,我是使用 style=“display:flex;”解决的。(附上我看的教程链接:https://www.cnblogs.com/qingchunshiguang/p/8011103.html

不过也可以使用float。(附上我看的教程链接:https://blog.csdn.net/zz_rose/article/details/81292583

 

先写这些,以后再补充吧

2017-12-06 16:27:30 myfirst_web 阅读数 22624
  • 微信小程序前端程序设计和JS入门到精通

    讲解微信小程序中前端程序的基础知识,涉及变量的定义和使用,对象、数组的的定义和使用,if条件语句和for循环语句的使用,事件的定义和使用,如何使用JSON数据格式的使用和实战,json对象的定义,普通json对象,json数组对象等;实战小程序中登陆功能的实现,如何获取用户的微信账号相关信息等 微信小程序商城15天从零实战课程 https://edu.csdn.net/course/detail/19437

    4147 人正在学习 去看看 黄菊华

耗时一个星期终于搞定微信支付,对于第一次涉足前端、微信支付的我来说,这并非易事,闲话少说,下面我用最通俗的语言来描述一下:

第一部分 微信公众号后台

1、申请微信公众号(需要营业执照),开发者认证(300两),微信支付申请。申请过程不细讲,按照引导一步步完善信息,接下来用到的所有配置项如果没有开放,就要对应向微信申请。
2、程序员直接看“开发”部分。首先“开发”–“基本配置”中开发者ID(AppID)、开发者密码(AppSecret)这两项是需要记录下来的,接下来的很多地方需要这两个数值来请求微信的接口,IP白名单需要把服务器的IP加进去,只有加进去的服务器,才能成功调取到微信的access_token(这个值是将来请求微信接口时,获取用户OpenId、用户基本信息之类的数据时所必须的)。其它暂时不需要配置。
3、其次“开发”–“开发者工具”。开发者文档(看得懂的直接忽略本文章);web开发者工具就是一个类似浏览器的软件,微信授权登陆的时候实际上是直接登陆微信的链接,但是这个链接仅限在手机微信打开没办法调试,这样开发者就需要在电脑使用开发者工具打开这些链接建议使用;其它选项先忽略。
4、接口权限,只要开通了微信支付,该有的都有了。

第二部分 后台

1、集成后台SDK,可以通过“微信支付”–“使用教程”–“公众号支付”–SDK与DEMO下载,选择对应的后台类型下载,下面的都是java版的解读。
2、微信公众号支付SDK集成到Java程序中。首先通过maven引入代码如下:

<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>0.0.3</version>
</dependency>

3、在微信官方下载的java版SDK中,\src\main\java\com\github\wxpay\sdk路径下的七个函数复制出来放到自己的工具类备用。其它文件中的内容都可以忽略,因为maven引用中已经将所有需要的jar包都已经导入。很关键的一点,在readme.md文件中很详细的介绍了一些常用的方法,其中就有统一支付的调用方法。
这里写图片描述
4、从WXPay中不难找到,其中就有统一支付的Java代码,以及要传入的参数,试着将微信公众号中提供的openId绑定调用,即可收到返回信息,统一支付有两种模式,分别是trade_type=NATIVE时(即扫码支付)trade_type=JSAPI时即为公众号发起的支付,区别在于,前者返回一串二维码字符串,通过qrcode二维码编译成二维码之后,可供用户扫码支付;后者会调用微信自带的接口,跳出密码输入框,让用户输入密码之后支付。下面针对传入trade_type=JSAPI之后需要做的操作。
5、上一步传入JSAPI的同时,需要传入的参数还有prepay_id、用户openid 等,prepay_id、用户openid 是通过微信的另一个接口,将用户授权登陆获取的token传入获取的,具体授权,以及授权后如何利用token获取prepay_id、openid可以参照微信提供的文档共有三次请求,特别注意其中一些接口调用次数有限,需要自行存储在缓存。拿到这些参数之后,接下来就是前端的工作了
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

第三部分 前端

———-未完待续———-

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