盈讯科技社 潜水
  • 1发帖数
  • 1主题数
  • 0关注数
  • 0粉丝
开启左侧

快速开发一个自己的微信小程序

[复制链接]
 楼主| 盈讯科技社 发表于 2018-6-29 15:33:15 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一.写在前面
1.为什么要学小程序开发?
对于前端开发而言,微信小程序由于其简朴快速、开发本钱低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。
2.开发准备:
(1)有人开玩笑说,会vue小程序根本都不用学:
微信小程序虽然是腾讯自己搞的,但是核心的头脑跟vue等框架是一样一样的哦~
(2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。
具体怎么找到想要的小程序demo,篇末会给各人推荐小程序的资源,有很多大神的项目哦
撸起袖子开干了
一.注册小程序账号,下载IDE
1.官网注册https://mp.weixin.qq.com/,并下载IDE。
2.官方文档一直都是最好的学习资料。
注意:
(1)注册账号之后会有一个appid,新建项目标时候必要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。
(2)如果你注册过微信公众号的话,肯定要注意,微信公众号和小程序是两个账号,二者的appid也是差别,小程序开发必须利用小程序的appid哦。

                               
登录/注册后可看大图

二.小程序框架介绍和运行机制
1.我们建立了“平凡快速启动模板”,然后整个项目目录如下:

                               
登录/注册后可看大图

2.app.js
整个项目标启动文件,如解释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆乐成的回调;获取用户信息。
globalData是定义整个项目标全局变量大概常量哦。

                               
登录/注册后可看大图

3.app.json
整个项目标配置文件,比如注册页面,配置tab页,设置整个项目标样式,页面标题等等;
!注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面哦。
4.pages
小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs
5.打开index目录
可以看到有三个文件,其实和我们web开发的文件是一一对应的。
index.wxml对应index.html;
index.wxss对应index.css;
index.js就是js文件哦。
一样平常我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面标题等功能
6.双击index.js文件
(1)var app = getApp();
引入整个项目标app.js文件,用来取期中的公共变量等信息。
如果要利用util.js工具库中的某个方法,在util.js中module.exports导出,然后在必要的页面中require即可得到哦。
(2)比如,我们要获取豆瓣电影的时候,我们必要调用豆瓣的api;我们先在app.js中的gloabData中定义doubanBase
然后在index.js中利用app.globaData.doubanBase即可取到这个值。
当然这些常量你也可以在页面必要的时候,再用写死的值,但是为了整个项目标维护,照旧建议把这种公用参数统一写在配置文件中哦。

                               
登录/注册后可看大图


                               
登录/注册后可看大图

(3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react哦~
通过setData修改data数据,驱动页面渲染

                               
登录/注册后可看大图

(4)一些生命周期函数
比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等
更多的可以查官网API哦。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)
7 .wxml模板的利用。
比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套利用。
star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可

                               
登录/注册后可看大图


                               
登录/注册后可看大图

8.常用的wxml标签
view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可
三.小程序框架、各个页面以及发布上线的注意点
1.整个框架中的一些注意点
(1)整个wxml页面,最底层的标签是哦。
(2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置哦。
(3)json中不能写解释哦,不然会报错的。
(4)路由相关

                               
登录/注册后可看大图

1)利用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还必要在tabBar中注册tab页,才能生效哦。
注意:tab最多5个,也就是我们说的头部大概底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。
2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册哦,不然同样也是不能跳转的哦。
3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候哦。
(5)页面之间传递参数
参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

                               
登录/注册后可看大图


                               
登录/注册后可看大图

(6)data-开头的自定义属性的利用
比如wxml中我们怎么写

                               
登录/注册后可看大图

点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;
注意: 大写会转换成小写,带_符号会转成驼峰形式
(7)事件对象event,event.target和event.currentTarget的区别:
target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。
比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控恣意一张图片是否被点击,
这时target这里指的是image(由于点击的是图片),而currentTarget指的是swiper(由于绑定点击事件在swiper上)
(8)利用免费的网络接口:
本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档哦,很详细的
注意:免费接口是有访问限制的,以是如果用别人的组件用了这种接口的话,最好照旧自己注册一个新的key替换上哦
附上一个免费接口大全:
https://github.com/jokermonn/-Api

                               
登录/注册后可看大图

!!另外还要注意,要把这些接口的域名配置到小程序的合法域名中,不然也是访问不了的

                               
登录/注册后可看大图

(8)wxss有一个坑:无法读取本地资源,比如配景图片用本地就会报错哦。
把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的哦
2.切换城市页面:
(1)首页利用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返返来,天气信息照旧旧的。
正确的处置惩罚逻辑如下:
1)利用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面哦。
2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。
3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的哦。
(2)城市列表的滚动和回到顶部
基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部
3.天气页
(1)初始化页面,天气显示的逻辑
首先调用小程序的wx.getLocation方法获得当前的经纬度,然后调用腾讯地图获得当前的城市名称和区县名称,并存到公共变量中,
再调用查询天气和空气质量的方法哦。
(2)容错处置惩罚
城市的名称长短不一,有点名字特殊长,比如巴彦淖尔市这种,必要动态的获取完整的城市名称;
有些偏僻的城市暂时没有天气信息,我们必要对返回的结果进行判断,没有信息的必要给用户一个精良的提示信息。
4.周边-地图服务页面
(1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档
(2)点击时给被点中的图标加个边框,数据驱动视图,以是利用一个长度为3的数组生存三个图标当前是否被点中的状态
然后wxml再根据数据来动态添加class,增加边框样式
5.豆瓣电影页
(1)电影详情页的预览图片,用小程序自己的previewImage实现。
(2)详情页利用onReachBottom()方法,监控用户上拉触底事件,然后发送哀求继续获得数据,实现懒加载的结果
(3)用户体验方面的优化,js中将整数评分比如7分统一改为7.0分,然后wxml模板再判断分数是否为0显示“暂无评分”
(4)搜索之后清空搜索框
由于小程序中不能利用getelementbyId这种方式获得元素,只能用数据来控制了
在data中加一个属性searchText来生存搜索框的内容并和 input的value属性绑定,搜索完成大概点击X时,searchText变量清空即可实现清空输入框的结果哦。
6.新闻页面
(1)聚合头条新闻的免费接口,只返回了新闻的基本信息,新闻的主体内容是没有的哦。
我找了好多新闻类的接口,好像都是没有新闻主体内容的。如果谁知道更好的接口欢迎留言告诉我哈~
(2)当然,也可以自己去爬新闻网站的数据哦
7.更多页面
(1)小程序现在开放外链的功能只是给公司组织的小程序开放了,个人开发照旧不能利用外链的哦。
(2)彩蛋页面,获得用户信息
通过 wx.setStorageSync('userInfos', userInfos); 可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析
我这里只是存储到浏览器缓存中哦,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。

8.发布注意
(1) 新版本小程序发布的限制为2M,一样平常都是图片最占空间,以是尽量利用网络图片
具体怎么把本地图片变成网络图片,上面有讲哦。
(2)在开发者工具上预览测试没题目,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块--开发版本就有了内容。
(3)点击提交,填写小程序相关信息,就可以提交审核了哦。
注意:分类最好填写准确,这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的
至此,我就把两天开发内遇到的坑和注意点都过了一遍,听说还有更多的坑,等之后更深入的开发再继续研究咯。

精彩评论20

姓张名伟外号斯内克 发表于 2018-6-29 18:03:45 | 显示全部楼层
你这样写注定不会有人看的,因为大多数人并不会编程,只有发一些小白的教程才会有人
眉山游泳周老师 发表于 2018-6-29 18:15:50 | 显示全部楼层
说直白一点就是你们公司会做这个嘛。
莱拍视觉 发表于 2018-6-29 21:21:10 | 显示全部楼层
请问支付系统那些怎么做。希望能分享
猫头鹰是鸟 发表于 2018-6-29 23:23:21 | 显示全部楼层
语法不好,还不太习惯。
有所为48254462 发表于 2018-6-30 06:38:49 | 显示全部楼层
跟我一起推广小程序吧,基础班680,专业商城版1980,[害羞]
淡淡的海洋 发表于 2018-6-30 11:37:50 | 显示全部楼层
表示看不懂,明人不说暗话,让你们做一个小程序要多少钱
湘村之之vlog 发表于 2018-6-30 11:42:24 | 显示全部楼层
还是没懂。
龙影-小强 发表于 2018-6-30 13:29:19 | 显示全部楼层
我也想问问,请您们帮忙做一个,费用要多少?
-CXP- 发表于 2018-7-1 22:36:48 | 显示全部楼层
这个是什么语言写的
猜你喜欢
在线客服QQ
2241998733

24x7小时免费咨询

Powered by 创意电子 ©2018-现在 专注资源实战分享源码下载站联盟商城繁体中文