小程序学习加油站
包括前端知识点和小程序开发的知识点,从入门开始介绍一步一步教你掌握前端和小程序的开发,重要内容重点剖析让你掌握的更透彻,了解的更深入,同时,互相学习互相提问互相帮助,才是我们共同成长的良好发展道路。
沉默的小猴子
这个作者很懒,什么都没留下…
展开
-
安利一个工具大全小程序(包含小程序模板+源码)
小程序名称【美丽生活帮】。二维码:里面有各种类型的小程序模板源码,优秀的UI,以及各种花里胡哨的功能。但是仅限开发以及咨询作者,想要源码包的需要联系作者也就是客服。主屏幕三部分内容:首页:中间页:个人中心:二级页面列举:...原创 2019-12-04 09:43:03 · 1802 阅读 · 2 评论 -
小程序中添加阿拉丁数据统计
首先,注册或者登陆阿拉丁官网:https://www.aldwx.com/index。在个人中心中添加微信小程序,获取appkey,如图然后看官方的帮助文档:http://doc.aldwx.com/aldwx/gao-ji-gong-neng/sdkjie-ru-zhi-nan.html切记,不要看乱七八糟的。重要的三点:1、在微信公众平台:https://mp.weixin.qq.c...原创 2019-04-23 17:30:56 · 4806 阅读 · 1 评论 -
微信小程序滑动屏幕控制动画隐藏和显示
思路一,使用scroll-view组件的事件,缺点:动画不够流畅思路二,微信小程序自带的pagescroll事件,缺点:监听不方便,层级较高思路三,给页面最外层添加触摸事件思路四,小程序自带的触摸事件的API一个触摸开始的监听,一个触摸结束的监听。为了实现动画流畅,加上一定的延时延时,动画速度均匀即可。rowTouchMove:function(){ if(console.log("r...原创 2019-04-23 17:16:18 · 5902 阅读 · 0 评论 -
小程序开发video组件自定义功能
原生的video组件功能已经可以满足用户所有需求,本文介绍一下非正常的用户需求怎么解决。比如:用户需要限制播放时不能滑动屏幕快进、不能拖动进度条快进快退,不准倍速播放,不准全屏;用户第一次完整看完视频后可以倍速,快进,暂停和全屏。解决的思路:隐藏掉video自带的所有控件功能,包括原生的video功能全部设置为false,然后自己画一个底部控件包含播放按钮还有进度条和全屏按钮,在全屏页面左上角...原创 2019-03-19 09:41:17 · 6410 阅读 · 18 评论 -
小程序微信支付功能开发
关于小程序内唤起微信支付功能,不同人有不同的思路,有嵌套H5页面的,也有跳转第三方链接网站的,也有放收钱码等图片的。今天讲一下微信原生的微信支付功能基础版块,支付页面和支付逻辑。先上个效果图:页面展示上提供了,商品名称,支付方式,用户信息,支付金额。更详细的可以包含手机号,订单号等信息。而在微信支付文档中所必须提供的内容就是商品价格{{total_fee}},还有商品描述{{body}}...原创 2019-03-19 08:44:38 · 26120 阅读 · 1 评论 -
小程序实现漂亮的个人中心版面
先放上效果图,然后再解构如何实现。常见的个人中心内容包括了:头像,用户昵称,会员信息,充值信息,还有个人设置,收货地址,订单历史,收藏记录,浏览历史等等。这些板块都可以用组件来实现。页面逻辑中:将头像和昵称还有会员信息放在顶部在一个宣传版面展示。剩余的个人中心的功能则单独拿出来做一个列表功能。很多人可能会想到,实现列表功能,列表有多少是不是对应的功能函数就要有多少呢,其实大可不必。除了...原创 2019-03-15 13:41:03 · 35540 阅读 · 20 评论 -
小程序wx:for循环列表数量的限制
我们都知道循环一数组要用到wx:for。这种循环会循环出列表的所有数据。但是很多时候我们并不需要循环所有的数据,或者并不想展示所有的数据。尤其是在首页上,只需要展示部分的数据,这时候就要用到wx:for下面的index属性;data-index可以给数据列表进行0-99999的排序,同理我们要展示一部分的数据,就要通过index来限制。index<3,就是显示序列0,1,2这三条数据...原创 2019-02-28 13:41:17 · 17753 阅读 · 5 评论 -
小程序分享功能实现结果回调以及页面传参
分享功能的函数:onShareAppMessage。这个函数通用,既可以右上角分享,也可以在页面内自定义button 分享。button的opentype =“share”.实现参数回调的函数:onShareAppMessage: function (res) { console.log("用户点击了按钮开始分享", res) var userNid = wx.getStora...原创 2019-02-28 11:37:17 · 23794 阅读 · 4 评论 -
小程序开发:在登录时弹窗用户使用协议
本次讲的是如何在用户打开小程序时候弹窗该小程序的使用协议,阅读确认后方可继续使用小程序。这一点的意义在于:目前小程序对于各个开放接口的使用限制更严格,使用开放接口获取用户信息需要添加使用的用途说明,那我们正好可以使用这一个使用协议弹窗来说明该小程序都要干什么。1、布局组成:弹窗放在template中,供login页面来调用;login页面中加载弹窗模板,使用isShow等属性来控制;JS中,在...原创 2019-01-17 08:29:11 · 17929 阅读 · 1 评论 -
小程序识别用户手机系统选择支付方式
写在前言:用过微信支付的都知道,小程序在支付时候也被苹果无情的抛弃了。所以就要区分是安卓机型还是苹果机型。那么怎么区分呢,在小程序中有API的。wx.getSystemInfo组件功能就是获取用户手机系统信息这一点我们直接配置在小程序的APP.JS中方便整个小程序的页面调用//app.jsonLaunch: function(ops) { //调用API从本地缓存中获取数据 ...原创 2018-12-29 13:46:47 · 1061 阅读 · 0 评论 -
小程序的tabar顶部和底部导航的区别
最近有人说小程序的底部tabar放在顶部会出现问题,那么先看看如何放在顶部吧:图片效果:这里呢,在官方文档是有说明,tabbar 的属性设置里面有个position属性,position只支持bottom和top两种。而且,在默认值为top的情况下,顶部导航是不显示icon图片的。在配置的时候只需在app.json中写明即可:同时呢想写顶部导航栏的话可以参考我的另一篇文章https...原创 2018-12-26 14:24:04 · 1975 阅读 · 0 评论 -
小程序入门知识点(二)
开发步骤先去官网注册申请小程序账号,在官方后台配置小程序的名称头像以及简介和所属行业应用场景等信息,完善后认证审核,认证完成后才拥权限编辑发布小程序,此时会生成新的小程序APPID,这个APPID在开发设置里面,旧的原始额AppID在 基本设置里面。一个小程序主体部分由三个文件组成,必须放在项目的根目录app.js是小程序逻辑app.json是小程序公共设置app.wxss是小程序公...原创 2018-12-26 10:28:51 · 282 阅读 · 0 评论 -
JS原生编写实现留言板功能
实现这个留言板功能比较简单,所以先上效果图:实现用户留言内容,留言具体时间。<script> window.onload = function(){ var oMessageBox = document.getElementById("messageBox"); var oInput = document.getElementById("myInput"); ...原创 2018-11-09 16:41:22 · 2808 阅读 · 0 评论 -
JS操作DOM节点查找
JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找。<script>window.onload = function(){ //children 与 childNodes console.log( document.body.children ); //包含7个节点的数组 console.log( document.bod...原创 2018-11-09 16:31:00 · 2089 阅读 · 0 评论 -
AJAX封装数据处理简单操作
数据的封装处理主要展现在JS中,在页面里面引入封装的JS,“js/ajax.js”简单封装将get和post方法都写入,get的方法和post的方法依然需要严格区分,包括type类型也要严格书写:function ajax(method, url, data, success) { //命名方法 var xhr = null; try { xhr = new XMLHttpRe...原创 2018-11-09 11:14:59 · 455 阅读 · 2 评论 -
AJAX的兼容处理方式
AJAX在网站服务中使用到频率很高,也需要考虑各个浏览器版本的兼容性,本示例中详细介绍简单快捷的处理兼容性问题。<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>AJAX原创 2018-11-09 10:21:16 · 927 阅读 · 0 评论 -
AJAX的表单请求POST请求方式
表单数据的提交action : 数据提交的地址,默认是当前页面method : 数据提交的方式,默认是get方式post:把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面enctype : 提交的数据格式,默认application/x-www-form-urlencoded<body> ...原创 2018-11-09 09:50:44 · 3266 阅读 · 4 评论 -
AJAX的get表单请求方式简述
一般在页面中常用在表单的操作中,请求数据,action : 数据提交的地址,默认是当前页面method : 数据提交的方式,默认是get方式get:把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面enctype : 提交的数据格式,默认application/x-www-form-urlencoded<...原创 2018-11-09 09:43:00 · 438 阅读 · 0 评论 -
原生JS写表单验证提交功能
先上效果图:表单的基础内容就是昵称判断、手机号判断、邮箱判断、身份证号码判断,这里是用到正则验证检验格式。页面的表单写法就是一个form的提交。输入框用input来实现,输入内容用value来获取。每个输入框用唯一的ID名字来标记:<body> <div class="content"> <div class="title">用户注册<...原创 2018-11-08 15:45:27 · 4616 阅读 · 0 评论 -
用JS写一个网站树形菜单
先上效果图:主体内容就是侧边展示的一二三级菜单,树形结构的。前端页面布局内容,页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级:&lt;body&gt; &lt;b&gt;&lt;img src="images/fold.gif"&gt;树形菜单:&lt;/b&gt; &l原创 2018-11-08 15:06:25 · 11015 阅读 · 1 评论 -
小程序导航组件navigator活学活用
小程序开发中必不可少的组件navigator,虽然使用频率非常高,但是却没多少人能灵活运用。先说navigator组件的用处:它的主要用处是跳转执行,跳转可分为当前页面内跳转、前往页面外部的跳转。其中,在官方文档中有明确示例:<view class="btn-area"> <navigator url="/page/navigate/navigate?title=na...原创 2018-11-07 13:44:32 · 2993 阅读 · 2 评论 -
小程序跳坑之JSON字符串转换JSON对象
常见的JSON字符串转换有很多,这里只讲我遇到过的小程序中用到的转换。通常我们在小程序中用到的地方是,请求一个数据表或者请求一个接口,拿到了一堆数据,里面包含有各种字段数组,头像,图片,详情,地址,位置等等。而且我们不能直接取出来用,也不能通过数据渲染出来。这时候就需要转换转化。重点内容:var jsonStr = cookDetail.recipe.method; j...原创 2018-10-30 10:41:55 · 11090 阅读 · 1 评论 -
小程序开发之自主添加创建问卷
做过的许多小程序里面,有问卷调查版的,但是那是从后台调取题库,然后展示出来的,所以这一次我讲一下如何做一个自主创建的问卷小程序。首先添加问卷的过程就是创建表单的过程。但是这个表单不仅仅是一个form表单,我先展示一下界面样式图:创建问卷活动,首先明白步骤:需要有标题、名称介绍、活动介绍、宣传banner,以及涉及到的题目类型,单选多选填空问答,功能上要考虑增加题目,删除题目,必做还是选做。保...原创 2018-10-30 09:55:10 · 1901 阅读 · 6 评论 -
小程序之动态获取列表对象详细信息
先上效果图展示:本内容主要介绍如何在列表中去动态获取对象详情:1.先展示列表内容:列表内容仍然是通过数据绑定和聊表渲染来实现,wx:for的一系列参数设置。&amp;lt;block wx:for=&quot;{{personList}}&quot; wx:key=&quot;&quot; wx:for-item=&quot;item&quot;&amp;g原创 2018-10-23 14:03:08 · 4474 阅读 · 0 评论 -
小程序地图开发周边信息POI展示为列表
##首先附上效果图在我前面的文章中我详述过如何使用百度地图API来开发小程序的地图,所以这里面就不说基础内容了。直说如下:##1.如何获取列表://分类存储 makertap: function(e) { var that = this; var id = e.markerId; that.showSearchInfo(wxMarkerData, id);...原创 2018-10-16 09:36:50 · 2160 阅读 · 4 评论 -
小程序开发顶部TAB栏和侧边分类点击
先上一个效果图:根据这个效果图我来说内容。首先是顶部tab栏效果实现依靠的是一个组件scroll-view。这个组件很有意思,可以多层嵌套,当然它的属性也很多。这里主要用的是scroll-x,scroll-x的默认值是false,我们要设置为true。这一步我们仅仅是实现了可以左右滑动。更重要的是如何判断滑动到了哪个位置,怎么获取对应内容。滑动距离由于我们是左右滑动所以这里是scrol...原创 2018-09-19 08:53:41 · 4876 阅读 · 4 评论 -
答题小程序之调查问卷模板开发
这次我和大家分享一下如何用小程序做一个问卷调查小程序,可以是行业问卷,或者是测试题的。该问卷调查主要介绍题目多且题型多,题目数在15道以上,题型包含单选,非必做、必做题,填空题。当然可以从这些衍生更多的出来。 首先理清思路:第一页我们做欢迎语和简介,在答题入口上做跳转题目页和授权按钮功能,然后开始做题,选择题放前,填空题放后,每页2道题,任何一道为空都会提示“请做完本页所有题”,当...原创 2018-09-10 08:52:27 · 30798 阅读 · 37 评论 -
小程序给内容做列表排名和信息分类归纳
很久前学写的一个做医院排行和分类归纳的小程序,今天就把其中的一部分内容分享出来。 先上效果图给大家看看: 可以进行前三排名,还可进行综合医院和三甲医院排名。当然你要是活学活用的话可以演变为很多例子,绝对够你开发用了。下面开始正文介绍:第一、列表怎么做列表我们参照小程序的数据绑定和列表渲染来写;&lt;block wx:for="{{searchHospita...原创 2018-09-01 09:42:01 · 4760 阅读 · 2 评论 -
小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下。效果图,wxss的内容较简单,自己编写即可。主要内容一、首先我是在util.js中引入表单正则验证规则,给予login.js来引用function regexConfig() { var reg = { userid: /^[A-Za-z0-9]+$/, //邮箱正则验证 ph...原创 2018-08-28 09:04:17 · 20987 阅读 · 5 评论 -
小程序开发入门须知(一)
这篇博客主要介绍小程序入门常见,前提是有web或者HTML开发经验,一眼就能学会的。总纲:1.入门目录配置说明 2.小程序头部底部tabBar设置 3.常用轮播效果和功能介绍 4.事件绑定和数据绑定 5.列表渲染一、基本目录配置index.wxml =index .html,是页面内容 index.wxss =index .css,是css样式表 根目录app.js...原创 2018-08-04 09:54:46 · 353 阅读 · 0 评论 -
小程序实现附近三公里搜索和地图路线导航(改版)
本片博客主要介绍的是小程序利用百度地图搜索附近三公里信息开篇先提一下,网上有很多关于小程序搜索框的,地图地点信息检索的,路线导航的,以及一个找事吧APP模仿的小程序。我也看过这些内容,整理一下,就是我今天要展示的。惯例,先上整体效果图: 这是点击药店,搜索附近20个药店信息。 可以打印出20个药店的信息数据,自己可根据实际情况展示。 搜索附近营业厅信息。同样是打印20个。...原创 2018-08-01 10:07:33 · 12004 阅读 · 33 评论 -
微信小程序调用用百度地图天气功能
小程序之调用百度地图天气功能本篇博客主要介绍小程序在百度地图中获取天气信息,如有不全请指出。下面先上效果图主要内容 - 百度地图API的个人密钥,也就是AK - 请求百度地图API接口数据 - 获取到的信息结果 - 页面输出获取到的信息 - 完整代码第一步:获取个人AK这一步较为简单,也有很多博主写过了,可以直接去百度开放平台注册获取,链接(http://lbsy...原创 2018-07-31 09:38:44 · 3914 阅读 · 13 评论