• HTML与WXML:两者差异比较大,如果之前没有接触过Android开发,可能会觉得有些头疼。事实上,WXML更像是Android开发中的界面XML描述...JS文件:小程序的JS文件与前端开发使用的JS几乎没有区别,只是小程序的JS新增了
    • HTML与WXML:两者差异比较大,如果之前没有接触过Android开发,可能会觉得有些头疼。事实上,WXML更像是Android开发中的界面XML描述文件,适合于程序界面的构建;而HTML则倾向于文章的展示(这与HTML的历史有关),以及互联网页面的构建。

    • WXSS与CSS:两者在语言上几乎没有差别,可以直接通用。

    • JS文件:小程序的JS文件与前端开发使用的JS几乎没有区别,只是小程序的JS新增了微信的一些API接口,并去除了一些不必要的功能(如DOM)。

    在有眼上,小程序完全向学习成本最低的前端开发看齐,但这不代表所有开发者都能无缝迁移。如果你是从前端开发转向小程序,就要注意这两点:

    • 1、HTML与WXML两种文件的构建思想差异较大,如果之前只接触过前端开发,需要一点时间才能适应WXML的编写方法。

    • 2、虽然小程序使用的是前端语言,但不代表可以继续沿用的开发思想进行开发。小程序对前端开发的要求从【构建界面】升级成【开发完整应用】,前端开发需要在意识上进行转变。

    想了解更多关于微信小程序开发的相关知识,请查看我的博客主页,或添加我的微信:liujia123888.

    展开全文
  • 本人只会前端,想自己做微信公众号开发,不知道是用什么语言,js可以吗? 看了接口文档。文档如下,access_token已经有。 ![图片说明](https://img-ask.csdn.net/upload/201907/25/1564043986_533070.png) 不知道...
  • 今天需要用到weui,这里记录一下开发文档地址 开发文档:http://old.jqweui.com/components (官网) js文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md github: ...

    今天需要用到weui,这里记录一下开发文档地址

    开发文档:http://old.jqweui.com/components (官网)

    js文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md

    github: https://github.com/Tencent/weui.js

    菜鸟教程:http://www.runoob.com/w3cnote/weui-for-weixin-web.html

    效果展示: https://weui.io

     

    展开全文
  • 由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求. 第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架. 第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应. 目前完成三个界面如下: ...

    由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求.

    第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架.

    第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应.

    目前完成三个界面如下:

    上面的就是 目前的界面以及手机适应的效果,后期需要修改.

    下面的是第一个界面的代码:

     

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
            
            <!-- Jquery  -->
            <script src="/WeChatDemo/jquery-weui/dist/lib/jquery-2.1.4.js"></script>
            <!--weui css-->
            <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
            <!--jQuery weui-->
            <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
            <!--切换样式-->
            <style type="text/css">
                .weui_navbar_item.weui_bar_item_on {
                    color: #2196F3;
                    cursor: pointer;
                }
            </style>
            <title>售后测试	</title>
        </head>
    <body ontouchstart>
    <header class="ui-header">
    			<h1>**电气售后服务公众号</h1></header>
    			
    			
    <div class="weui-cells weui-cells_form">
    <!-- 车型 -->
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label ">车型</label></div>
        <div class="weui-cell__bd">
        <!-- 这个地方的pattern 需要进行修改 -->
        <!-- 此处输入车型信息 添加 车型class  -->
          <input class="weui-input chexing" type="text"   placeholder="点击选择车型">
        </div>
      </div>
    <!-- 车型 -->
    <!-- 车号 -->
      <div class="weui-cell weui-cell_vcode">
        <div class="weui-cell__hd">
          <label class="weui-label">车号</label>
        </div>
        <div class="weui-cell__bd">
        <!-- 此处添加车号信息  添加车号 class -->
          <input class="weui-input chehao" type="text" placeholder="请手动输入机车号">
        </div>
      </div>
    <!-- 车号 -->
    <!-- 日期 -->
      <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
        <!-- 此处添加 日期信息 添加日期 class -->
          <!-- <input class="weui-input faultdate" type="date" value=""/> -->
          <input class="weui-input faultdate" type="text" data-toggle='date'/>
        </div>
      </div>
    <!-- 日期 -->
    <!-- 故障发生地点 -->
    <!-- 暂时有些问题 先去掉 -->
     <!--  <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">地点</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input faultarea" type="text"  data-toggle="city-picker" value="浙江 杭州 拱墅区" />
        </div>
      </div> -->
    
    <!-- 故障发生地点 -->
    <!-- 时间 -->
    <!-- 这个部分暂时省略,等待后期需求需要在改回去 -->
      <!-- <div class="weui-cell">
        <div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div>
        <div class="weui-cell__bd">
        此处添加 时间信息 添加时间 class
          <input class="weui-input faulttime" type="datetime-local" value="" placeholder="">
        </div>
      </div> -->
    <!-- 时间 -->
    <!-- 机车故障信息 -->
    <div class="weui-cells__title">机车故障填报区</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
        <!-- 故障信息 添加故障class faultinfo -->
          <textarea class="weui-textarea faultinfo" placeholder="请在此处填写机车故障信息!" rows="3"></textarea>
          <div class="weui-textarea-counter"><span>0</span>/200</div>
        </div>
      </div>
    </div>
    <!-- 机车故障信息 -->
    </div>
    
    <!-- 提交成功提示界面 -->
    <a  class="weui-btn weui-btn_primary">提交</a>
    <a  class="weui-btn weui-btn_warn">取消</a>
    <!-- 提交成功提示界面 -->
    <!-- 底部foot -->
    <div class="weui-footer weui-footer_fixed-bottom">
      <p class="weui-footer__links">
        <a href="javascript:void(0);" class="weui-footer__link ">**电气售后</a>
      </p>
      <p class="weui-footer__text ">Copyright © 2010-2018 **dq.com</p>
    </div>
    <!-- 底部foot -->
    
    
    
    
    <script type="text/javascript">
    $(document).ready(function(){
    	$("a.weui-btn.weui-btn_primary").click(function(){
    	 alert("已经获取点击事件"); 
    	 		
    	 	var chexing = $(".weui-input.chexing").val();
    	 	var chehao = $(".weui-input.chehao").val();
    	 	var faultdate = $(".weui-input.faultdate").val();
    	 	var faulttime = $(".weui-input.faulttime").val();
    	 	var faultinfo = $(".weui-textarea.faultinfo").val();
    	 	alert("车型是:" + chexing + "车号是:" + chehao + "故障填报时间是:" + faultdate
    	 			+"故障时间是:" + faulttime + "故障信息是:" + faultinfo); 
    	 	
    	/*  	 $.ajax({
    	        //直接"post"或者"get",不需要"doPost","doGet",该函数到后端接收缓冲区会自动匹配
    	        type : "post",      
    	        //servlet文件名为Calculator,需要提前在web.xml里面注册
    	        url : "FaultServlet", 
    	       dataType :  "json",  //数据类型,可以为json,xml等等,
    	        data :
    	        {
    	             "chexing" : chexing,//车型
    	             "chehao":chehao,//车号
    	             "faultdate":faultdate,//故障时间
    	             "faultinfo":faultinfo //故障信息
    	        },
    	        success : function(response)
    	        {
    	               //处理后端传递过来的 JSON 数据.
    	               var success = response.success;
    	               alert("后端处理完毕");
    	               if(success == "SUCCESS"){
    	            	   //使用jquery 代码进行跳转.
    	               $(location).attr('href', 'http://inut5w.natappfree.cc//WeChatDemo/submitsuccess.html');
    	               }
    	        },
    	        error : function(xhr, status, errMsg,response)
    	        {	
    	        	//服务器错误处理
    	        	var v1 = xhr;
    	        	var v2 = status;
    	        	var v3 = errMsg;
    	            alert("数据传输失败!");
    	        }
    	    });  */
    	 	
    //	 	 $(location).attr('href', 'http://inut5w.natappfree.cc//WeChatDemo/submitsuccess.html');
    	 	 $(location).attr('href', 'http://localhost:20000//WeChatDemo/submitsuccess.html');
    	  });
    	  <!--这个是机车车型的Picker-->
    	  $(".weui-input.chexing").picker({
    		 // input: '.weui-input.chexing',//这两个属性加上之后没有效果.有待测试.
    		 // container: '#container',
    		  title: "选择您的故障车型",
    		  cols: [
    		    {
    		      textAlign: 'center',
    		      values: ['HXD1', 'HXD3', 'HXN5', 'HXN5B', 'HXN3', 'HXN3B', 'HXD3D']
    		    }
    		  ]
    		});
    	  <!--这个是机车车型的Picker-->
    	  <!--这个是机车型号的Picker-->
    	 /*  $(".weui-input.chehao").picker({
    		 // input: '.weui-input.chexing',//这两个属性加上之后没有效果.有待测试.
    		 // container: '#container',
    		  title: "选择您的故障车号",
    		  cols: [
    		    {
    		      textAlign: 'center',
    		      values: ['0001', '0002', '0003', '0004', '0005', '0006', '0007']
    		    }
    		  ]
    		}); */
    		//车号的picker 暂时禁用 由于车号估计数量比较多 
    		//所以 为了便于用户的使用 决定使用 手动输入的方式.
    	  <!--这个是机车型号的Picker-->
    	  <!--这个是日期的Picker-->
    	/*   $(".weui-input.faultdate").calendar(); */ //这个只是日期的简单的日期 不包括时间的格式.
    	//下面的这个是包括的日期还有时间
    	  $(".weui-input.faultdate").calendar();
    	  <!--这个是日期的Picker-->
    	  <!--故障填报区这写字体增加样式-->
    	  $(".weui-cells__title").css({"color":"red","font-size":"12px"});
    	  /* #18b4ed  蓝色的背景    不正常的绿色  #33cc00 */
    	  $(".ui-header").css({"color":"#fff","font-size":"15px","background-color":"#1AAD19","text-align": "center"});
    	  /*  $(".ui-header h1").css({"color":"#fff","font-size":"20px",}); */
    	  
    	  <!--故障填报区这写字体增加样式-->
    	  <!--故障地点-->
    	  //$(".weui-input.faultarea").cityPicker();//目前有问题 暂时先去掉
    	  <!--故障地点-->
    	  
    	});
    </script>
    
    
            <!--页面切换-->
            <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
            <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
        </body>
    </html>


    上面引入文件的时候注意这个地方:

     

     

     <!--weui css-->
            <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
            <!--jQuery weui-->
            <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">


    本地文件也有如下图:

     

    但是引入本地的文件,在电脑测试的时候是可以出现效果的,可是在手机端测试的时候无法适应移动端设备.

    改为代码中的引入方式就可以做到适应,不清楚是版本的问题,还是文件的问题.

    这里是Jquery-WeUI官网首页:JQueryWeUI官网.

    我们可以参照相关Demo,根据自身需求进行前端界面的设计以及代码的编写.

    展开全文
  • 点击阅读原文 微信小程序服务器端用什么语言开发?首先,比如微信二次开发,可以java或者php 来做服务器端语言来进行二次开发,那小程序呢?文档写着.js负责业务逻辑,难道服务器端就是纯JS实现? 包括对数据库的...

    点击阅读原文



     微信小程序服务器端用什么语言开发?

    首先,比如微信二次开发,可以用java或者php 来做服务器端语言来进行二次开发,那小程序呢?文档写着.js负责业务逻辑,难道服务器端就是纯JS实现? 包括对数据库的操作吗? 还是也可以用php?

    其实文档中在request里面可以填写自己的网站地址,那么应该就可以从自己的服务器获取到数据,所以后端什么数据语言都可以。

    那这样的话是不是跟ajax差不多啊, 后台PHP处理好后反馈给前端数据又怎么返回?

    服务端语言和前端逻辑没啥关系吧,php,python都行。但是最好用 python,快速开发!php 开发后端会遇到很多问题的。

    wx.request发起的是https请求。一个微信小程序,同时只能有5个网络请求连接。



    展开全文
  • 这篇文章写给开始进行微信开发前端人员学习(初次和前端人员配合的后端也可以看),如果是大神就不用浪费时间看了! 微信公众开发中我们会使用config 接口进行权限验证配置,需要的字段参数如下所示: wx.config({ ...

    这篇文章写给开始进行微信开发的前端人员学习(初次和前端人员配合的后端也可以看),如果是大神就不用浪费时间看了!

    微信公众开发中我们会使用config 接口进行权限验证配置,需要的字段参数如下所示:

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名
        jsApiList: [] // 必填,需要使用的JS接口列表
    });

    (不用惊讶,上面的代码是复制的)

     其中appId 是自己注册的测试号的appId

    timestamp 是自己获取signature随意生成的随机字符串
    nonceStr 是自己获取signature 随意生成的随机时间戳
    下面讲解获取signature 的步骤

    在注册微信平台测试账号后 你会获得 appID 和appsecret

    通过微信接口

    https://api.weixin.qq.com/cgi-bin/token?appid=你的appid&grant_type=client_credential&secret=你自己的appsecret

    这个接口与会返回一个仅你自己填写的安全域名可用的AccessToken

    接下来使用获取的AccessToken 获取JsApiTicket

    https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=你前面获取的AccessToken

    这里会得到你自己域名可用的JsApiTicket

    再按照下面的拼接方式将参数拼接起来进行SHA-1加密

    string1 = "jsapi_ticket=" + jsapi_ticket +
            "&noncestr=" + (随机的字符串)nonce_str +
            "&timestamp=" + (时间戳)timestamp +
            "&url=" + url;

    经过上面的接口以及加密算法过后就会得到 一串 字符串 这就是 config 需要的signature签名了

    此处说一下这中间的一些坑 

    1.在获取使用SHA-1算法的时候 使用的url 是 你当前进行config 配置的 页面的url并且要和你在测试号管理平台填写的域名要一致(原因是,你在进行config 配置的时候,微信后台也根据你配置的参数进行SHA-1算法加密,但是在这个过程中会取的是你当前的url),所以这也是为什么做微信公众号开发需要前端自己起一个web服务并且要使用花生壳或者其他工具做动态域名的原因

    2.有的同学在配置 接口配置信息 的服务器时会一直失败 如果你配置的这个域名没有在80端口做任务处理的话是肯定会配置失败的

    配置这个服务器时你需要在80端口开放一个接口,然后你配置这个服务器资源时 微信后台会向你配置的域名服务器的80端口发送一个请求 这个请求会携带一个你自己填写的Token和echostr两个参数 你只需要这80端口判断是否是你紫的填写的Token 或者你嫌麻烦可以直接把它 发送过来的echostr 字符原样返回都可以 只要在80端口返回echostr 内的字符就可以配置成功

    3.因为我是用java 写的 开发后台 所以我的是timestamp nonceStr 是这样生成的其他语言的 可以效仿 

    timestamp ---- Long.toString(System.currentTimeMillis() / 1000);
    nonceStr ----- UUID.randomUUID().toString();

    以上我是在学习微信公众平台开始时 遇到的问题 踩到的坑 。

    欢迎各位同行 提问 不保证一定能解答。

    展开全文
  • 摘要:本文说明了微信前端页面开发的基本架构,说明了组成文件各自的详细结构,通过这几个文件的协同工作,微信小程序开发框架可以实现页面Page中视图层和逻辑层的统一。0. 简介根据之前开发者工具和开发框架简介的...
  • 2、开启公众号开发模式,需要了解微信公众平台的原理。 3、微信号是在联网的环境下才能够实现各种功能的。必备条件准备,第一个是外网服务器,让我们的项目部署在上面,第二个是微信公众平台账号.可以多了解微信...
  • 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。 在大部分开发者看来,ECMAScript和JavaScript表达的是同一种含义,但是严格的说,两者的意义是...
  •  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。  2.开发准备:  (1)有人开玩笑说,会vue小程序根本都不用学:  微信小程序虽然是...
  • 第一次进行前端开发,经验总结,个人记录 使用语言 HTML5+CSS+PHP(不过由于需求方要求比较简单 并没有使用上PHP) 使用框架:WEUI 项目内容:微信公众号页面 总结: 1.菜鸟教程会讲述很多基本语法,所以html5...
  • 小程序是基于微信平台的轻量级应用,它的开发是应用微信提供的小程序前端规范,结合企业自己开发的应用后端来制作的。 小程序开发使用语言本质上就是JS+CSS+HTML5,不过不能直接HTML标签,微信提供一个组件库,...
  • 微信使用开发语言和文件很「特殊」。 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Sheet,微信样式表) ③JS(Java,小程序的主体) 在语言...
  • 现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在这篇博客记录我之前开发的...
  • 其实一直想写这个关于微信开发的博客,但总是被其它的事情耽误,我记得刚开始接触微信的时候,还是我13出来的实习的时候,那个时候微信好火,它的高级接口,其它如何接入与自己的服务器平台,但后面尤其来了上海之后...
  • 企业微信是腾讯推出的一个新的办公协作平台,通过与微信一致的沟通体验,为企业员工提供最基础和最实用的...本文以该项目为例对在企业微信平台开发企业应用的特点进行了总结,重点分析了企业微信开发平台对应用开发...
  • 耗时一个星期终于搞定微信支付,对于第一次涉足前端微信支付的我来说,这并非易事,闲话少说,下面我最通俗的语言来描述一下: 第一部分 微信公众号后台 1、申请微信公众号(需要营业执照),开发者认证...
  • 讲解微信小程序中前端程序的基础知识,涉及变量的定义和使用,对象、数组的的定义和使用,if条件语句和for循环语句的使用,事件的定义和使用,如何使用JSON数据格式的使用和实战,json对象的定义,普通json对象,...
  • 微信公众号开发教程(一)验证接入本篇文章主要介绍了微信公众号开发接入详细流程,希望对刚接触公众号开发的同学有所帮助,有兴趣的同学可多多关注叩丁狼公众号,后续会更新不同的公众号小案例。公众号的分类我们平常...
  • 微信H5开发(二)

    2018-07-15 10:45:14
    第一次使用微信开发文档的时候,感觉文档里面写的内容不算太难,但在实际开发中会碰到很多预想不到的问题。 微信开放平台、微信商务平台 有什么用?都在哪里? 首先从微信公众号讲起,期间用到微信商务平台和...
1 2 3 4 5 ... 20
收藏数 23,072
精华内容 9,228