![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
文章平均质量分 80
陈小聪-小虎Oni
无才可去补苍天,枉入红尘若许年。
知识才是一个程序员最虔诚的信仰。
展开
-
全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
之前公众号开发可能都是运维人员提供的appkey,所以不少的朋友,对微信的后台管理系统不熟悉。借由小程序提供个人账号申请,在这里专门写一篇图文教程。虽然微信对个人小程序做了诸多限制,但是作为入门的开发权限还是基本够用的。首先,要注册个人微信小程序1、你要准备一个邮箱,并且这个邮箱没有注册过个人微信,或者公众号和服务号(没有限制邮箱可以注册一个qq邮箱,但要注意,新注册的qq三天内没原创 2017-05-12 10:18:58 · 1147 阅读 · 2 评论 -
全栈工程师之路-中级篇之小程序开发-入门教程完结报告
首先,说说小程序开发的完结,基本上的东西,在我们前面的章节中,都已经提到过了。我觉得掌握这些内容,足够你开始开发小程序了。接下来,就要我们根据实际的项目需求去实现了,如果遇到教程中没有提到的东西,可以查阅官方的API,也可以在公众号后台联系我,或者联系我本人微信号,联系方式在左侧的侧边栏里面有。源码在码云https://git.oschina.net/x原创 2017-09-07 09:39:44 · 1110 阅读 · 5 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第七节个人中心
今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了, 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></原创 2017-08-24 14:57:19 · 582 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面
继上次教程结束之后,我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发,只要跟着这个教程一步一步完成的,你就能完成这样的界面优美是不是很容易啊。 但是,完成前两章,我们只涉及到页面的编写,很少涉及到页面的功能,那么这一章,我们的主要任务就是编写一些简单的页面逻辑。 我们要实现的是点击上图中的更多,跳转到查看更多页面。 首先我们还是先创建查看更多页面,在json文件中,直接添原创 2017-08-28 15:20:32 · 826 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第五节获取用户权限、下载文件、保存到相册、用户拒绝授权重新授权
继上一节课,我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题,展开讲解获取用户权限,将网络图片下载到临时文件,最后保存到相册。获取用户权限 wx.authorize 使用方法如下:// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.getSetting({ success(res) { if (!res.aut原创 2017-09-06 10:13:30 · 5920 阅读 · 7 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第四节点击查看大图,保存壁纸
由于获取详情那些接口的豆瓣API,都有权限限制。 所以,电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示,详细的在前面的章节中已经讲解过了。 然后在index.js中加入点击查看大图的函数 保存预览,点击首页的电影的图片。 我们可以原创 2017-09-05 09:41:26 · 1020 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第三节正在加载,loading状态
继前一篇文章,我们已经实现了小程序中的上拉加载和下拉刷新, 如果用户网络较差的情况下,或者服务端返回处理的情况下, 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后,我们的页面又好像突然之间出现的, 这整个过程中的用户体验并不是很好,不理解什么是用户体验的, 那可以换一种方式,就是说整个过程让使用者觉得并不是很舒服。 所以通常在请求发起到请求响应的这个过程中,我们会加入l原创 2017-09-04 10:25:29 · 3613 阅读 · 1 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第六节tabBar详细说明
首先我们新建一个界面,还记得新建界面的快捷方式吗? 在app.json的pages里面,新增”pages/user/user” 即 "pages":[ "pages/index/index", "pages/logs/logs", "pages/user/user" ], ctrl+s保存。小程序在检测到没有user目录的时候,就会自动创建相关的文件。原创 2017-08-21 10:58:42 · 474 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
在网上好多人,喜欢找别人写好的一些线上的项目源码,比较完整的。想着学习的更加实用和全面一点。这无可厚非,但是,我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。我个人觉得既然官方把这样的demo推到了入门的地位,那必然是有它的道理的。所以我很喜欢从官方的demo开始学习,因为它足够简单,足够让我明白它的用法和逻辑。上一节课,我们已经原创 2017-07-28 16:10:48 · 922 阅读 · 2 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第三节小程序豆瓣评分主页
今天我们来编写整个豆瓣评分的首页界面框架。我们今天主要讲解界面的编写,目的是再一次加强对模板的理解。原创 2017-08-04 09:41:38 · 981 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第二节小程序电影卡片模板
上一节课,有朋友反映我最后写的操作步骤太琐碎了。其实我只是想表达一下我自己的思想过程,从分析方法到关注点。我觉得这对于新手还是有点作用的。如果你不知道怎么入手解决一个问题,不放跟着我的节奏,进去试试。言归正传,我们接下来编写,电影卡片的模板。还是一样的先分析界面,这个界面是上下结构的,最上方一张图片,中间一行文字,下面一个stars模板(我们上一节课编写的内容)我们原创 2017-08-03 11:06:20 · 1218 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第一节小程序的模板-评分星星模板
本章我们将以一个实战项目为主要内容,穿插讲解小程序的各种概念。因为没有UI和后端,所以,我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类似下图的小程序。(大家可以搜索小程序,豆瓣评分,线上已经有了。)首先我们来分析一下这个小程序,主要分为电影和个人中心(个人中心我们放后面讨论)。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。(后续看公原创 2017-08-02 15:46:30 · 1478 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise
上一节课最后,我们遇到了一个警告。说我们太过频繁的调用serData了,因为我们这个页面的三部分数据是通过三个接口获取的。所以我们分别在三个接口返回的时候调用了数据绑定。但是过于频繁的调用setData很容易引起性能问题。要理解为什么会引发性能问题,我们要先看一下setData的工作原理。https://mp.weixin.qq.com/debug/wxadoc/dev原创 2017-08-09 11:37:34 · 900 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第二章第四节小程序http请求与请求本地json文件
上一节课,我们已经基本完成了,首页的界面编写。逻辑暂时不理会。但是我们用于展示页面绑定的是我们本地的假数据。接下来我们就来获取真正的数据来展示页面。绑定假数据编写页面算是前段最早做的一件事情吧。特别是在前后端同步开发,联合测试的时候。服务端会先输出接口文档,然后前后端根据接口文档同步开发,最后联合测试。这就需要前段本地编写大量的假数据。如果我们每个页面的假数据的单独原创 2017-08-07 16:34:23 · 12506 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第五节从px到rpx
这一小节作为第一章的最后一节,其实关于单位的文章,在博客上倒是挺多的。我一直在想,我是不是有必要再写这一节,还是给大家提供一些阅读链接。因为关于单位的定义都是比较官方的。没什么好讨论的,我这里做一个汇总和简单的说明吧。首先本文只以移动设备为例说明。本文摘要:设计师以iphone6为标准出设计稿的话,1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所原创 2017-07-31 10:42:34 · 1716 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第四节从block盒式布局到Flex弹性布局
说明:为了便于理解和分析,此处我们全部使用块级元素div来进行说明。因为要将这个文档应用于博客,所以所有的样式写在style中。标题一二三不代表这些概念同级,仅仅代表本文提到的顺序。关于盒式布局的定义和说明,请自行搜索了解,此处不做详细说明。我这里引入几个概念,是我自己理解所得,不权威,但有利于学习和理解。一、块block我把页面中宽度占满屏幕,高度任意的元素(或者区域)成为块。不管是原创 2017-07-29 14:48:32 · 2081 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第一章第二节注册小程序和开发工具讲解
这节课我们来说说微信提供的小程序开发工具。一、首先我们从官网下载微信开发者工具,注意,不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友,可能会遇到一个奇怪的问题,明明下载的安装包是最新的,安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后,把所有的文件都删除重新安装就可以了。从微信公众平台技术文档进入的微信web开发者工具的下载地址是错误的,要从小程序的文档进入的才是正确的。原创 2017-05-13 20:36:38 · 1202 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-前言
我一直在考虑这个系列的第一个教程该从什么框架开始写起。是我自己入门时候学习的angularjs,还是大部分web前端入门的jquery?看过我的教程的朋友应该对我的学习方式有一点点的了解。我一直觉得学习前端没有那么多东西需要理解的,只要先记住用法,用的多了,慢慢的就能理解了。我不敢说自己的学习方式是最好的,但是如果此时你刚好没有更好的选择,不妨考虑一下我的方式。对于自学,我还是原创 2017-05-11 22:57:58 · 1898 阅读 · 0 评论 -
全栈工程师之路-中级篇之小程序开发-第三章第二节小程序下拉刷新,上拉加载
今天就直入主题吧!调试技巧这里讲一个调试的技巧,因为这个页面是我们点击了首页的更多才进入的,并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置,这是一个自定义按钮。 写上路劲和参数就可以了,这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复去修改json文件。上拉加载首先我们先编写一下moviemore的页面。 在头部引入搜索按钮,记得在wxs原创 2017-08-30 13:44:16 · 966 阅读 · 0 评论