• 一直想总结一篇关于前端微信开发的文章,但奈何本人极懒,工作时间又太长(暗喻加班…)等等各种原因导致没有写出来。现在之所以鼓起勇气总结一下还是想让自己理解更深刻一点儿,也让刚开始接触微信开发摸不着头脑的...

    前言(废话篇)

    一直想总结一篇关于前端微信开发的文章,但奈何本人极懒,工作时间又太长(暗喻加班…)等等各种原因导致没有写出来。现在之所以鼓起勇气总结一下还是想让自己理解更深刻一点儿,也让刚开始接触微信开发摸不着头脑的童鞋少走一点儿弯路!!!

    微信开发准备工作(正文开始)

    1.映射

    1.内网穿透映射工具(将内网映射出来便于在手机上面测试),推荐使用natapp(9元/月) 使用教程链接:https://natapp.cn/article/natapp_newbie
    (a)使用natapp需在官网下载natapp.exe 链接地址:https://natapp.cn/#download
    在这里插入图片描述
    (b)还需要下载使用本地配置文件config.ini链接地址:https://natapp.cn/article/config_ini
    在这里插入图片描述

    (c)注:映射vue项目需注意以下2点:
    在这里插入图片描述
    在这里插入图片描述

    2.申请测试公众号及菜单配置

    (a)微信测试号申请链接:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
    在这里插入图片描述
    (b)进入公众号后需要绑定域名和网页授权域名绑定,注:两者域名必须相同
    在这里插入图片描述
    在这里插入图片描述
    ©配置微信自定义菜单,需要先获取accesstoken(两小时过期)链接:https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token
    在这里插入图片描述
    在这里插入图片描述
    配置自定义菜单内容body格式如下:

    {
        "button": [
            {
                "type": "click", 
                "name": "测试一", 
                "key": "V1001_TODAY_MUSIC"
            }, 
            {
                "name": "二级菜单", 
                "sub_button": [
    					                {
    					                    "type": "view", 
    					                    "name": "搜1", 
    					                    "url": ‘页面跳转地址’
    					                }	
            		 			]
              }
          ]
    }
    
    

    以上为准备工作ok!!!那么万众瞩目的代码开发过程即将到来!!!敬请关注下一篇内容(开发篇)

    展开全文
  • 【年终总结】微信前端社招有感 时间飞快,转眼间8102还差一个月就over了,顺了顺好几天没理的胡渣儿,好像已经老了不少。 不,我还很年轻!虽然年终还没到,但好像也差不多了。 几经辗转,年底前终于拿到了微信...

    【年终总结】微信前端社招有感

    时间飞快,转眼间8102还差一个月就over了,顺了顺好几天没理的胡渣儿,好像已经老了不少。

    不,我还很年轻!虽然年终还没到,但好像也差不多了。

    几经辗转,年底前终于拿到了微信的offer,可以说是今年一大幸事了。

    是一个结束,结束本命年的坎坷;是一个开始,开始新的征程。

    这篇杂文就简单记录一下微信前端社招的经历,以及回顾这两年半做过的东西。

     

     

    一、过七关

    微信社招,老早就听说难度极大,十几轮面试的情况都有。

    所以急不得,大概今年下半年开始,本菜菜就着手准备了,主要是扩充知识面以及加深对相关知识的理解与运用(暴露了平时有点懒。。。)

    说实话,这半年收获颇多,熬夜也最多,应该有十来次为了理清某些东西,奋战到半夜两三点,若是失败了就过几天再战...

     

    可能不同的岗位性质不同,要求也不同,对我而言,整体上对业务解决能力要求很高,算法方面则没有太高要求

    每轮都问到了职业规划,为什么离开目前的环境

    我总共经历了七轮(4轮技术、两轮GM、一轮HR),轮次可穿插并不是按顺序的。面试体验都非常棒~

    当时觉得可能面不到最后,没有刻意去记录面试问的东西,所以现在也忘得差不多了,也没必要刻意去刷面试题,就算刷到了,不久之后也会忘的。

     

    1、技术电面(1h)

    这轮算是探实力吧,确认有没有前端基础和好的项目经历。

    首先以在公司承担的角色作为开端,问了平常做过的一些项目,介绍其中一个,就从里头挖掘业务的问题和解决办法,同时抽取一些前端技术题。

    没办法,项目说起来不够复杂呀,似乎面试官并不满意,自己就趁机把话题引向了其他有特色的项目来突围。

    抽了一些博客上记录的知识点来问,期间竟然找了我四年前的文章(问了各种编码,以及BOM头优缺点适用性)和某道算法题 -_- 

    HTTP和HTTPS的握手过程,是否了解HTTP2的特点,以及怎么理解它的多路复用

    还讲了对前端安全和性能的理解,移动端的认识等

    总之第一轮感觉还好,勉勉强强,话比较多,时间不慢的。

     

    2、技术现场(1h)

    这轮感觉跟第一轮差不多,只是比较正式些,来到了广州塔旁边的T.I.T

    除了栽在了iPhoneX刘海屏的相关问题和移动端适配是否需要支持高清屏的“争论”外,基本稳住了气场。

    深知自己没有可以拿出手的很牛逼的项目,为了体现自己还是会一些东东的,就只能穿插着讲出几个项目了。

    讲了前端优化的实践(为什么优化,怎么优化,怎么评估,还能怎么优化)

    前端错误收集(怎么记录,怎么区分是不是第三方插件的问题,怎么上报,怎么分析)

    问了PC端和移动端的转换,ES6常用的东西,数组方法大全等

     

    3、技术现场(1h)

    本轮是和前一轮衔接在一起的,这种方式挺好的,可以节约候选人来回奔波时间。

    当时感觉是总监级别的,因为气场有点强大,短裤拖鞋很随性,判断得出来反应必须非常快才能留下好印象,后来才知道是组长

    问的东西,前端方面相对少一点了,偏向于整体性

    问了目前团队现状,在团队前端沉淀,技术预研上做了什么,为什么这么做,有没有起到什么作用。

    列举几条前端代码检查规则,为什么这么制定

    有没有做接口的统一规范,返回码之类的规定,怎么和后端协商好这些规则,怎么让新人很好地用好这些

    为什么要做小程序预研,它不是很简单么

    MVVW是什么,有什么优缺点

    怎么实现记住登录功能(很强的整体性)

    怎么实现统一登录,或者授权登录需要考虑什么(更强的整体性)

     

    4、HR现场(35min)

    直接就来到了hr面,很快吧......流程可以随意插进来

    一不小心提前1h到了现场,前台那小伙子也不知怎的,直接就联系hr了,说实话我本不想打扰的

    不过hr马上就下楼来接待了,进入稍许嘈杂的咖啡厅慢等,服务质量还阔以,在这里是要点个赞的

    本轮面试主要考察了团队感受,过往的项目经历,技术学习能力,薪酬期望

    期间面试官也很直白的说,她要知道有没有解决复杂问题的能力

    直接从大学阶段问起了,从在校时期做的最好项目,到工作时期做的最好项目,

    听起来似乎还是没对胃口,就只有拿出自己为解决问题不辞辛劳很有决心的不堪历史来说了 -_- 

    问了平时解决问题的方式,有没有从团队中学到了什么,跟谁学到的,团队中角色,觉得团队有什么问题

     

    5、GM现场(30min)

    本轮是直接连着HR面的,基本没问技术,侧重考量业务理解能力以及是否适合部门

    看到面试官戴着一个佳明跑表,想必也是跑马人士哈哈哈,相对来说还是蛮轻松的,把之前的项目又说了一遍

    如果要做一个数据分析系统,在前端方面可以做什么东西(涉及了需求理解、功能拆分、技术实现)

    问了自己做过什么业务,期望什么业务方向

    介绍了职级体系,部门的业务特点

     

    6、GM电面(15min)

    本轮面试可以说是最惨的了,感觉面试官并不满意自己做的项目,草草就收场了,也就诞生了第七轮技术面。

    团队的成员分布,各角色职责和定位,怎么进行版本迭代,一个系统的开发与维护周期是怎样的,项目延期的时候怎么做的

    因为做的主要是内部系统(面向公司内部的需求),被问到为什么不尝试部门间转岗,为什么两年多了还一直在做内部系统

    介绍公司其他部门团队的业务等

     

    7、技术现场(1h)

    本轮面试属于技术交叉面,即由其他部门的人来面,主要还是因为前几轮表现不佳,让面试官们犹犹豫豫的。

    这小哥一直乐呵呵的,看起来很容易谈得来,也确实很容易谈得来。后面HR说他是少有的T4级前端,大大牛呀...真是随和

    面到后面才知道,他一直想挖出我拆分问题的能力,如何对大的问题进行分解,逐个击破,同时思维要发散,也许还有更简便的方法。

    一个难题,比如我提到了曾经想过整一个适合部门的CI/CD方案并实现,不过遇到了蛮多难题就没有做下去了

    这里就缺了拆分问题模型的能力,不应想着难度太大做不了就做不了,而应该分析好从小的做起,一点一点地添加,慢慢坚持。

    其实是自己作死挖了坑自己跳进去了..

    说了经常写技术博客和整一些Github项目是一个非常好的习惯,挑了性能和安全方面的项目实践来问,

    为什么用requestAnimationFrame来代替setTimeout

    首屏太慢的问题除了SSR这种方法还有没有其他更简便的方法(在前端方面直接干)

    前端规范的落地,碰到的问题和解决过程

    过往业务能力与技术能力的实践

    有没有看过一些源码,整理的webpack项目有什么难点,怎么进行优化的

    怎么调试,sourcemap是什么东东

    两颗树比对一般怎么做,React中虚拟DOM是什么,它在树对比方面做了什么优化,新版本React有什么性能上的变化

     

    从开始到结束,进行了差不多一个月,进度好像还是蛮快的,

    总之,就目前这个部门的社招面试而言,我感觉侧重考察的点是 是否具有解决复杂业务的能力

    当然,学习能力,技术专研,技术广度在两三年经验这个阶段是非常重要的。

     

    二、出师不利

    其实我在这前两周,还面了微信公众平台那个部门,一面电面就跪了,面完感觉可挂可不挂的样子

    主要问题出在:

    用了很久的JQ,却没认真地看过源码,被问到如何像JQ那样实现动画向左再向右不同的速度,回答得七零八乱

    问了JQ中选择器的识别解析顺序是怎样的,为什么从右到左,我竟然说成了从左到右性能应该会更高。。。可能是大脑空白了吧

    问了在React中事件处理回调里面,连续setState N次,会出发几次render,理解错误,以为他说的是特殊的那种自定义事件绑定,回答了这个事件不会受到事务处理的周期影响,所以是N次。我还有骨气地争论了起来。。。

    问了平时有没有意识去看一些项目中用到的框架插件源码,我竟然表达出了一种并不想了解其内部实现的论调 -_-

    项目中的某种解决方案太暴力了,还有更优雅的方案没有用到,联想到所做项目复杂度和技术追求应该不会很高

     

    也不知当时是怎么了,面完就呆坐在那回想,不敢相信自己会那么回答

    应该就是很久没被面试了吧,慌了神,也没有总结好自己所做的项目,分析出项目中的重要部分,技术积累还是不足。

    不服呀,随之就利用了接下来的一周时间,把JQ源码完整地看了一遍,我等菜菜只看懂了八九十这样子(也算是第一次完整地看源码)

    然鹅,公众平台的告吹经历,直接导致了下一个运营平台的不合适(因为是同一个大团队负责的),可以说很惨烈了

    还好后面有个机遇

     

     

    三、这两年半

    算起来毕业差不多两年半了,毕业那会定下来的职业规划,前端规划,现在看来肯定是没实现多少的了。回想起来,还真没有什么可说的

    前一年半大概过得很潇洒,大部分周末都会带着小相机外出拍来拍去的,逛了广佛附近蛮多所谓的景点(四五十个应该有了),

    近一年意识到再这么下去会不会废了,就减少了周末外出的次数,想着看看书搞搞个人项目什么的,

    然鹅那是不可能的,在家会不知不觉玩起了手机,还熬夜玩手机...

     

    部门负责的是公司内部的系统,内部系统,即用户群体为内部员工

    常人看来多为管理后台,外加很多奇奇怪怪的权限

    权限多那是没错,但管理后台就真没几个了,内部系统也可以有各种各样的系统

    就系统来说,算下来应该新开发了十来个新系统了,项目参与度都非常高,各有特色,也有蛮多有意思的技术点

    对业务的理解能力应该有了一些提升,至少不会趋于局限,能经常从整体的逻辑关联上考虑问题了

    其中大概有三个系统,大大锻炼了前端整体架构方面的能力(这里指的是需求整体分解,功能模块划分及通信,技术实现规划,人员分工排期)

    也从最初的对产品毕恭毕敬到现在的产品沙比-_- 需求调整真是非常快

    整了一些移动端活动页,不过也仅是活动页了,若是说移动端的系统,我还是没有太多经验的,所以后面就跟随技术的步伐,整了个移动端的适配布局,以备不时之需。

     

    移动端的调试,部门内一直没有一个可用的方案,一碰上问题,根本不知道怎么解决。后面就整理了一个比较完整的调试方案,用得还算方便

    资源文件缓存的问题一直存在,很多时候大家会忘记加上时间戳(或不知道要加,或忘了加)

    为了改善这个问题,把尘封已久的Node.js拿出来玩了玩,整了一个本地监听文件改变则更改相关引用资源时间戳的小工具,在其他老项目中也一直沿用着

    在requirejs项目中的去缓存配置是比较暴力的,设置urlArgs直接配置所有资源的时间戳,后来想着能不能结合Grunt和Gulp来自定义资源的时间戳,正好也可以搞起前端构建工具,然鹅都失败了,文件依赖实在不好解决。把目光投向webpack,也是想着先结合一下,差不多到成功的时候发现,一个关键的路径依赖问题实在搞不下去了,时间关系只有放弃(当时这块已经研究了一周多了,不能再浪费时间)。就放弃了对requirejs项目进行这种时间戳优化

    从而也诞生了另外一个方案:使用webpack和es6(或者再加上React)作为技术栈。webpack这个东西,其实配置是蛮复杂的,好像也没有一个比较完整的构建配置例子和说明。React和Vue提供了开箱即用的脚手架,但当时觉得还是自己整一个好一点,就花了非常多精力去调试配置项,印象中最麻烦的应该就是热更新替换、jquery相关引用、编译性能、模块提取权衡、资源路径处理这几块,不过最终还是搞了起来搞出成绩,绩效拿到了唯一的一个S。多的时候会同时开十几个项目的编译进程编译,随之整了一个同步读取可用端口的npm包,防止热更新端口冲突。为了便于维护,也对开发和生产环境做了区分。

    后端已经完善了一套代码规范,而前端竟然参考的还是后端的PHP规范,也只有JS有这种规范。没有规矩不成方圆,就在某个季度初期,决定把前端规范搞一搞。遂参考了大大公司们的规范,结合项目中的使用情况,整了一套适合部门的规则,看着算是比较完整的。然鹅,人是不可信的,还是应该有工具来限制好这个规范的实施,又搞起了前端代码检查工具,经历了选工具、选规则集、各编辑器配置规则集、webpack配置规则检查四个痛苦的过程,本来还想弄一下SVN的hooks来做提交前检查的,只记得遇到了蛮多问题就没有继续往下了。不过,前端规范的落地,目前来说并不是非常理想,落地这块还是蛮有难度的,还得考虑后端突然也改前端的代码。

    渣渣电脑越来越卡,项目编译得越来越慢, 在webpack4趋于稳定的时候,觉得应该升级升级以提升效率,果不其然,升级后速度提升了近7倍。结合日常开发的那堆项目,心想应该可以让配置更为简单,便对配置项再度抽离,核心文件抹平不同项目之间文件路径的不同,对外暴露业务关键配置部分,绩效继续拿了个A

    前端安全这块也是一个很大的知识点,自己最初也是懵懵懂懂的,后来也是想着要彻底理解它,以在部门内进行分享为目标去研究它。在项目中不断地测试后,最后便整理出了之前那篇文章,因眼界不足还有很多可以改善的,得等以后慢慢去整了。

    前端性能方面,完整地看了Chrome DevTools和相关官方出品的文档,早些时候也过了过那本《Webkit技术内幕》。目前进行了四个比较有意义的优化实践,两个移动端活动页的卡顿优化(主要是安卓手机呀为什么经常卡..),一个页面加载性能优化,一个页面运行时性能优化。目前正在尝试做JS运行优化的实践

    前端错误记录,打点监控方面,也没有做过太多的实践,这个和前端测试一样,都算是没啥经验了。目前正在开展这块的调研

    源码解析方面,完整看了JQ源码,看了React源码实现的主要部分,理解了webpack编译生成的文件规则

    看书方面,看了两本小说,十几本技术相关的

    个人项目方面,就写了四五个小项目

     

    带了两个新人,第一个是个好苗子可惜后面就撤了

    另外一个就差一些了,没啥基础,校招后端转过来的(也不能怪他,就怪老大骗他进来做前端)

    面了十几个人,有不一样的感受,还是很感谢能有这种面人的经历的

    团队管理方面,说真的,我们前端老大真是失职呀,团队基本没什么成长,没什么规划,也经常请假,我都替他忧心。找个好老大很重要

    所以平时就承担了一些本该前端负责人才做的工作,也了解到并实践了一些管理者的日常

    然鹅好像没啥兴趣,看起来我还是比较偏向做技术的...

     

    最后回头看看,技术提升的曲线的是有些放缓了,可能我不算是那种Geek吧,有时会懒得写代码懒得做技术,有时又很能投入进去。

    应该多回顾一下过于做过的东西,有没有价值,有没有提升,自己有没有懈怠。多看看外面的世界是怎样的。

    新的平台,带来新的机遇和挑战,就加油吧 ^-^

     

    [-_-]眼睛累了吧,注意劳逸结合呀[-_-]

    展开全文
  • 其实一直想写这个关于微信开发的博客,但总是被其它的事情耽误,我记得刚开始接触微信的时候,还是我13出来的实习的时候,那个时候微信好火,它的高级接口,其它如何接入与自己的服务器平台,但后面尤其来了上海之后...

    其实一直想写这个关于微信开发的博客,但总是被其它的事情耽误,我记得刚开始接触微信的时候,还是我13出来的实习的时候,那个时候微信好火,它的高级接口,其它如何接入与自己的服务器平台,但后面尤其来了上海之后就没在接触,这次公司又要开发,正好自己学习了一把,

    1.查看微信开发者文档,里面写的非常清楚,怎么接入,怎么返回json数据,

    接入微信公众平台开发,开发者需要按照如下步骤完成:

    1、填写服务器配置
    2、验证服务器地址的有效性
    3、依据接口文档实现业务逻辑
    /**
     * 确认请求来自微信服务器
     *
     * @param signature 微信加密签名
     * @param timestamp 时间戳
     * @param nonce     随机数
     * @param echostr   随机字符串
     * @return
     */
    @RequestMapping(value = "ichezheng", method = RequestMethod.GET)
    @ResponseBody
    public String wxApi(String signature, String timestamp, String nonce, String echostr) {
        String returnStr = SignUtil.checkSignature(signature, timestamp, nonce) ? echostr : "";
        return returnStr;
    }
    
    /**
     * 处理微信服务器发来的消息
     *
     * @return
     */
    @RequestMapping(value = "ichezheng", method = RequestMethod.POST)
    @ResponseBody
    public String wxApi(HttpServletRequest request) throws Exception {
        WeiXinMessage outMessage = null;
        Map requestMap = MessageUtil.parseXml(request);
        // 发送方帐号(open_id)
        String fromUserName = (String) requestMap.get("FromUserName");
        // 公众帐号
        String toUserName = (String) requestMap.get("ToUserName");
        // 消息类型
        String msgType = (String) requestMap.get("MsgType");
        logger.info("fromUser:==" + fromUserName + "toUser:==" + toUserName);
        outMessage = createReturnMessage(fromUserName, toUserName);
        if (msgType.equals(Constant.MSG_TYPE_TEXT)) {
            String content = ((String) requestMap.get("Content")).trim();
            sendText(outMessage, content);
            if (content.equalsIgnoreCase("id")) {
                //用户回复id
                 /*  logger.info("用户通过公众号查询自己的id");
                    User user = userService.selectUserByOpenid(inMsg.getFromUserName());
                    if(user != null ){
                        sendText(outMessage, "您的用户id为:"+user.getId().toString());
                    }else{
                        sendText(outMessage, "系统异常,请联系客服人员。");
                    }*/
            } else {
                /*   HashMap< String ,Object> map=materialTextService.getMaterialText(inMsg.getContent());
                    if(Integer.parseInt(map.get("code").toString())==0){
                        logger.info("进入查找massage!!");
                        ObjectMapper obj=new ObjectMapper();
                        Map maps=(Map) map.get("info");
                        sendText(outMessage, maps.get("content").toString());
                    }else{
                        logger.info("转客户服务。。。");
                        this.customerService(outMessage);
                    }*/
            }
            //   textMessage.setContent(content);
            //    respMessage = MessageUtil.textMessageToXml(textMessage);
        }
        //事件推送
        else if (msgType.equals(MessageUtil.REQ_MESSAGE_TYPE_EVENT)) {
            String eventType = (String) requestMap.get("Event");
            if (eventType.equals(MessageUtil.EVENT_TYPE_SUBSCRIBE)) {
                sendText(outMessage, Constant.WELCOME_MSG);
                String bindUser = userService.bindUserInfoById(outMessage);
            }
            //取消订阅
            else if (eventType.equals(MessageUtil.EVENT_TYPE_UNSUBSCRIBE)) {
                //暂不做处理
            }
            //自定义菜单点击事件
            else if (eventType.equals(MessageUtil.EVENT_TYPE_CLICK)) {
                String eventKey = (String) requestMap.get("EventKey");
                outMessage.setMsgType("news");
                logger.info("进入菜单点击");
                outMessage = GraphicMessageUtils.graphicMessage(eventKey, outMessage);
            }
        }
        return WeiXinUtil.messageToXml(outMessage);
    }
    这个时候仅仅是跟微信平台接入成功了,要注意需要配置微信平台服务器配置相关信息

    2.access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的access_token失效。

    所以你需要在自己的缓存机制里面保存这个access_token,并且2个小时后更新它

    3.拿到这个值后,你就可以随便去调用微信其它的高级接口了,其它的我就不多说了,自己可以看微信开发者文档,里面写的非常详细

    。。。。。总结到这些了,我需要去敲代码去了

    展开全文
  • 一、点击某个文字跳转页面 示例: 1、不返回 <navigator url="../../pages/sign/sign" class="viewSign" > <text class="textSign">---立即注册---</text> </navigator>...然后对应...

    一、点击某个文字跳转页面
    示例:
    1、不返回

    <navigator url="../../pages/sign/sign" class="viewSign" >
         <text class="textSign">---立即注册---</text>
      </navigator>
    

    2、返回
    view里bindtap=“bindsign”
    然后对应js里

    bindsign: function () {
        wx.navigateTo({
          url: '../sign/sign',
        })
      },
    

    二、一个view里所有控件按一列排放
    示例:

    .viewLogin{
      display: flex;
      flex-direction: column;
      align-items: center
    }
    

    三、
    (1)字体加粗

    示例:
    wxss中

     font-weight: bold;
    

    (2)一个view的顶部离另一个view距离
    示例:

     margin-top: 200rpx;
    

    (3)输入框中默认文字大小调整
    示例:

    <input class="inputPw" password placeholder="请输入您的密码" placeholder-class="place-holder"  bindinput="passWordInput" />
    
    wxss:
    .place-holder{
      font-size: 14px;
    }
    

    四、输入框样式
    (1)边框为实线,粗细调整,默认字体和输入框左边的距离)

    .inputName{
      border: 0.5rpx solid;
      padding-left: 5%
    }
    

    (2)输入框和图标并行排列
    示例:
    输入框和图标都在的view叫 viewName,此时:

    .viewName{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    

    五、要在某个页面的导航栏用非统一的不同文字
    示例:
    在对应json:

    {
      "navigationBarTitleText": "登录"
    }
    

    六、菜单栏图案点击前后变化
    示例:

    "tabBar": {
        "list": [
          {
            "pagePath": "pages/welcome/welcome",
            "text": "首页",
            "iconPath": "/images/首页icon.png",   //被选择前的图标
            "selectedIconPath":"images/首页icon1.png"    //被选择后的图标
          },
          {
            "pagePath": "pages/upload/upload",
            "iconPath": "/images/发布icon.png"
          },
          {
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "/images/我的icon.png"
          }
        ]
      }
    

    七、按钮

    <button class="btnLogin" bindtap="loginBtnClick">登录</button>
    

    按钮样式

    .btnLogin{
      width: 400rpx;
      height: 80rpx;
      color:#fff ;
      line-height: 80rpx;  
      background-color:#ff9537 ;
    }
    

    八、一些bug
    (1)json新建报错
    可以加上
    {
    “usingComponents”: {}
    }

    (2)js新建报错
    加Page。。。

    (3)报错Page “pages/mine/mine” has not been registered yet
    解决办法:js加Page。。。

    九、获取用户头像和昵称
    官方提供的最新方法Open-data标签,使用这个标签可以不用用户授权直接获得头像和昵称
    例子:

     <open-data type="userAvatarUrl"></open-data>    //获取用户头像直接显示在小程序中
     <open-data type="userNickName" lang="zh_CN"></open-data>    //获取用户昵称直接显示在小程序中
    

    十、
    display:flex
    flex是一种布局,display指容器或行内元素的排列方式

    justify-content: center;
    代表在主轴(默认主轴为横轴)上居中排列

    align-items: center;
    代表弹性盒子元素在 该行 的侧轴(纵轴)上居中放置。(居中对齐)

    展开全文
  • 现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的...
    1. 前言
      现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。

    2. 主要内容
      springboot后端架构构建
      小程序项目构建
      小程序api调用
      后台resetful接口编写
      小程序调用后台接口
      免费的https申请
      linux下部署上线

    3. 微信小程序项目构建
      这些基础的东西我就不过多介绍,大家在刚开始开发的时候一般都没有自己的服务器及域名,所以大家在本地编写的时候,在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。这里写图片描述
      至于微信小程序的组件,即前端页面的开发希望大家耐住寂寞认真在微信开发平台上,组件https://developers.weixin.qq.com/miniprogram/dev/component/及api:https://developers.weixin.qq.com/miniprogram/dev/api/

    4. 后端详解
      我在后端编写主要是用java,当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot,开发工具myeclipse,服务器阿里云服务器。
      创建一个maven项目,导入相关依赖:
      pom.xml依赖

        <!-- 统一版本控制 -->
    	<parent>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-parent</artifactId>
    		<version>1.5.9.RELEASE</version>
    	</parent>
    	<dependencies>
    		<!-- freemarker渲染页面 -->
    		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-freemarker</artifactId>
    		</dependency>
    
    		<!-- spring boot 核心 -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    		</dependency>
    
    		<!-- springboot整合jsp -->
    		<!-- tomcat 的支持. -->
    		<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-web</artifactId>
    			<exclusions>
    				<exclusion>
    					<groupId>org.springframework.boot</groupId>
    					<artifactId>spring-boot-starter-tomcat</artifactId>
    				</exclusion>
    			</exclusions>
    		</dependency>
    
    		<dependency>
    			<groupId>org.apache.tomcat.embed</groupId>
    			<artifactId>tomcat-embed-jasper</artifactId>
    		</dependency>
    	</dependencies>
    

    在配置文件src/main/resources/下创建application.properties文件可以修改一些配置参数等。

    #jsp支持
    spring.mvc.view.suffix=.jsp
    spring.mvc.view.prefix=/WEB-INF/jsp/
    #this is set port
    #server.port=80
    server.port=443
    #添加ssl证书
    #ssl证书文件名
    server.ssl.key-store=classpath:xxxxxxx.pfx
    server.ssl.key-store-password=xxxxxxxx
    server.ssl.keyStoreType=xxxxxxxx
    

    在实际项目中可能涉及数据库,还要整合mybatis,在文章中,我仅仅做测试就不做使用数据库的测试。
    首先创建springboot的入口程序:app.class下面贴上代码:

    @ComponentScan(basePackages= "com.bin")//添加扫包@ComponentScan(basePackages= "")
    @EnableAutoConfiguration
    public class App{
    
    	//启动springboot
    	public static void main(String[] args) {
    		SpringApplication.run(App.class, args);
    	}
    }
    

    启动项目时直接右击run即可。
    在写一个测试的controller进行微信小程序与java后端实现通信,controller代码如下:

    @RestController
    @SpringBootApplication
    public class ControllerText {
    	
    	@RequestMapping("getUser")
    	public Map<String, Object> getUser(){
    		System.out.println("微信小程序正在调用。。。");
    		Map<String, Object> map = new HashMap<String, Object>();
    		List<String> list = new ArrayList<String>();
     		list.add("zhangsan");
     		list.add("lisi");
     		list.add("wanger");
     		list.add("mazi");
     		map.put("list",list);
    		System.out.println("微信小程序调用完成。。。");
    		return map;
    	}
    	
    	@RequestMapping("getWord")
    	public Map<String, Object> getText(String word){
    		Map<String, Object> map = new HashMap<String, Object>();
    		String message = "我能力有限,不要为难我";
    		if ("后来".equals(word)) {
    			message="正在热映的后来的我们是刘若英的处女作。";
    		}else if("微信小程序".equals(word)){
    			message= "想获取更多微信小程序相关知识,请更多的阅读微信官方文档,还有其他更多微信开发相关的内容,学无止境。";
    		}else if("西安工业大学".equals(word)){
    			message="西安工业大学(Xi'an Technological University)简称”西安工大“,位于世界历史名城古都西安,是中国西北地区唯一一所以兵工为特色,以工为主,理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一(“兵工七子”),陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位,是一所以\"军民结合,寓军于民\"的国防科研高校。";
    		}
    		map.put("message", message);
    		return map;
    	}
    	
    	@RequestMapping("")
    	public String getText(){
    		return "hello world";
    	}
    
    
    }
    

    至此简易的后端框架及测试基本完成。
    说明:@RestController与@Controller注解的区别@RestController相当于两个注解,它能实现将后端得到的数据在前端页面(网页)中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

    1. 小程序发起网络请求
      在完成了小程序的后端开发,下面进行小程序端发起网络请求。
      下面以一个简单的按钮请求数据为例:
      wxml文件
    <button bindtap='houduanButton1'>点击发起请求</button>
    <view wx:for="{{list}}">
        姓名:{{item}}
      </view>
    
    js文件
    
     /**
       * 页面的初始数据
       */
      data: {
        list: '',
        word: '',
        message:''
    
      },
      houduanButton1: function () {
        var that = this;
        wx.request({
          url: 'http://localhost:443/getUser',
          method: 'GET',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)//打印到控制台
            var list = res.data.list;
            if (list == null) {
              var toastText = '数据获取失败';
              wx.showToast({
                title: toastText,
                icon: '',
                duration: 2000
              });
            } else {
              that.setData({
                list: list
              })
            }
          }
        })
      }
    

    主要调用的api就是wx.request,想知道将详细的介绍大家可以去微信公众平台
    接下来以搜索类型的请求为例:
    wxml文件:

     <input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'></input>
      <button bindtap='houduanButton2'>查询</button>
      <view wx:if="{{message!=''}}">
        {{message}}
      </view>
    

    js文件:变量的定义见上一个js文件

    //获取输入框的内容
      houduanTab_input: function (e) {
        this.setData({
          word: e.detail.value
        })
      },
      // houduanButton2的网络请求
      houduanButton2: function () {
        var that = this;
        wx.request({
          url: 'http://localhost:443/getWord',
          data:{
            word: that.data.word
          },
          method: 'GET',
          header: {
            'content-type': 'application/json' // 默认值
          },
          success: function (res) {
            console.log(res.data)//打印到控制台
            var message = res.data.message;
            if (message == null) {
              var toastText = '数据获取失败';
              wx.showToast({
                title: toastText,
                icon: '',
                duration: 2000
              });
            } else {
              that.setData({
                message: message
              })
            }
          }
        })
      }
    

    至此已经完成了简易的微信小程序端与java后端进行通信。
    现在可以在启动后端项目在微信开发工具上进行测试。
    演示效果:
    这里写图片描述
    这里写图片描述
    所以至此已经完成了小程序的前后端通信。

    1. https申请
      其实也不算什么申请,在购买域名之后可以申请免费的ssl证书,在前面的配置文件application.properties中有证书的配置,将证书的pfx文件直接添加到后端项目下即可。
    2. 购买服务器部署后端api代码
      对于springboot项目,本人建议打jar,直接在服务器上部署即可,在服务器上只需要安装对应版本的jdk即可。项目部署命令:
      我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。
    运行命令: nohup java -jar helloworld.jar &
    

    nohup的意思不挂服务,常驻的意思,除非云服务器重启,那就没法了;最后一个&表示执行命令后要生成日志文件nohup.out。
    当然还可以使用java -jar helloworld.jar

    源码:链接: https://pan.baidu.com/s/1PfByFfEgqkVALcc3PRhn9w 提取码: c7yf

    结束语:由于时间篇幅问题,本人介绍的内容很有限,希望对这方面有兴趣的你能有帮助。共同进步。
    觉得有帮助,给个赞赏吧。给赞赏的优先同意qq或者微信,问问题秒回复等[滑稽],谢谢老铁。
    在这里插入图片描述

    展开全文
  • [本文所描述的内容具有一定的时效性,请以实际开发所处环境为准] ...在接下来的文章中,我们来学习如何在开发模式下,让微信提供的...[备注:博主刚刚开始做微信开发,从设计上,代码优化上肯定不能与市面上已经出现的
  • 最近项目开发的时候涉及微信公众平台的开发,在这个学习过程中遇到了很多问题,了解清楚这部分,大概用了一个多星期,中间遇到很多问题,比较痛苦,网上的资料比较杂乱,导致查阅的时候遇到很多障碍,但是还是耐着...
  • 微信开发源码注释

    2016-06-11 18:11:55
    本文用于解释微信开发中的中PHP代码意义,用于学习先关基础知识
  • 微信小程序开发知识点总结1.微信小程序的目录结构1.外联公共样式的方法根据微信的官方文档,是支持@import的方式一如外联的公共样式的 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对...
  • 2、开启公众号开发模式,需要了解微信公众平台的原理。 3、微信号是在联网的环境下才能够实现各种功能的。...可以多了解微信企业号回调页面...首先应该微信服务器与我们的服务器项目的URL地址建立连接,在本地的e...
  • 一。技术点:1.采用了JavaScriptCore动态解析 2.大量借鉴React.js+ReactNative.js思想...搭建微信小程序开发环境 微信小程序官网:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644083132 安装包下载完成后...
  • 微信小程序与以往前端页面的区别1、view相当于div2、Image相当于img3、文本标签用text:包含在text里面的文字在手机上是可以长按选中的,否则无此效,也支持转义的特性&lt;text class="user-name"&...
  • csdn-微信开发

    2018-01-06 11:12:27
    1 .[025] 微信公众帐号开发教程第1篇-引言 2 .[028] 微信公众帐号开发教程第4篇-消息及消息处理工具的封装 ...微信开发 – 自定义菜单 7 .微信支付.NET版开发总结(JS API),好多坑,适当精简。 8 .一名An
  • 下面介绍在微信开发调试方面的应用。 微信网页开发中,由于有js接口安全域名和授权域名等的限制,导致部分功能需要部署到线上才能测试。通过代理可以实现本地调试网站的所有功能。 配置代理规则 全站转发可以这样...
  • 前端知识点学习指南 用来记录自己前端学习中遇到的大大小小的知识点: 1、CSS语法之@规则(at-rule) 2、css关于/deep/的解释和用法 3、在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容...
  • 一、微信开发的整体介绍 开放平台:https://open.weixin.qq.com/ 公众平台:https://mp.weixin.qq.com/ 1、微信开发的种类 ①移动应用开发 支持微信的分享、收藏、支付三大功能,原生开发的人员去使用的开发类别 ②...
  • 万字解析微前端、微前端框架qiankun以及源码 作者:晒兜斯 https://segmentfault.com/a/1190000022275991 本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是 微前端。 微...
  • 本文由云+社区发表 ...这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以...
  • 前段时间,凭借着出生牛犊不怕虎的劲头,凭借着一点Java基础和前端入门的知识水平,买了域名和服务器准备搭建自己的一个技术站点,初衷是旨在打造自己成为一个T形全站工程师。后经过各种百度,各种折腾终于大概在半...
  • 这是一篇关于微信公众号开发的入门指南,较为详细地介绍了开发微信公众号的基本原理,并且有相应的代码实现。如果您正打算要做公众号开发,却又苦于找不到一份简洁明了的入门级教学文档,那么这篇博客应该能解决您的...
1 2 3 4 5 ... 20
收藏数 21,482
精华内容 8,592