028-86261949

当前位置:首页 > 技术交流 > 微信小程序入门必看

微信小程序入门必看

2018/08/10 17:10 分类: 技术交流 浏览:0

大家喜欢听歌吗?知道许嵩吗?作为开发人员,我注意到一个很搞笑的事情,之前他的歌词都是“你灰色头像不会再跳动”,现在却是“打开你的朋友圈”,侧面反映出微信已经悄然崛起。据统计,微信使用人数已突破10亿月活跃人数,所以随之而来的越来越多微信相关的开发,比如微信小程序,而我们今天要讲就是微信小程序,那么什么是微信小程序呢?今天就让我们来一探究竟吧!
 
1. 微信小程序入门

1.1什么是微信小程序?

微信小程序(weixinxiaochengxu),简称小程序,缩写CX(讲真,这样的缩写也是没谁了),英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。  

1.2小程序的工作原理

用户打开微信,直接通过微信使用小程序,不需要下载安装,直接通过微信作为入口,就可以进入小程序,而小程序所使用的服务器是企业的服务器。


1.3小程序的未来趋势

小程序真是将“用完即走”体现到了极致,有点像一个暖男,随叫随到,不需要我们负责,而且说扔掉就扔掉。而且随着发展,以后还会更加完美,是不是很想掌握啊?那我们继续往下看吧!

 

2 搭建小程序的开发环境
我们要自己做一个小程序,给用户提供一个有自己特色,不同功能的暖男,应该怎么做呢?

2.1 获取AppID

首先注册一个微信小程序,在微信小程序的官网注册,填写如下信息。
 
通过前面的信息填写之后,登录进入微信小程序,在设置里面找到我们的AppID。什么是AppID呢?你可以理解为就是一个标识符,我们上线的项目必须有AppID,当然没有没有AppID也是可以开发的,只是不能上线,通过测试发现,没有AppID,微信小程序里面的有些功能是不可以使用的哦,比如共享单车里面的地图功能就是不可以使用,不可以获取当前的位置的哦。


2.2 下载安装开发工具

下载地址:
直接双击安装完成即可。


2.3 创建项目

A. 添加项目(注意不使用任何代理)
注意:这里的文件路径,在第一次开发的时候必须是一个空文件夹,如果之前是一个完整的微信小程序项目,才可以允许打开这个项目,而不能直接打开一个非空的文件夹哦。
B. 选择无AppID(无AppID不能用手机测试,只能用工具来测试),如果有相应的appid,就填上自己的appid。
C. 填写项目名称

 

3.小程序的配置与结构讲解

3.1 认识开发工具

窗口1是项目目录文件窗口,窗口2是代码编写窗口,窗口3是调试窗口,也就是控制台。

 

3.2 文件结构详解
1. pages下面的每一个文件夹对应一个页面,每一个文件夹下面的文件是不是感觉一头雾水?其实就是微信为了独树一帜,故意将我们前端一直在用的html改为了wxml,css改为了wxss,js就还是没有变化。所以大家不要慌,说白了,就是一个名字的变化,css到wxss,没有一点改变。只是html名字改为了wxml,然后修改了一下标签,所以说到这里,大家应该明白了,原来微信小程序尽管那么多人用,但是还是很简单的。而具体这些文件夹以及文件如何而来,我们后面会有说明哦,大家先不要慌。
2. utlis里是公用模块目录。
3. app.js,app.json,app.wxss这三个是必不可少的三个文件,就是负责对程序的整体起约束性作用的。比如一个js文件放在pages文件夹里的一个文件夹,那么这个js文件所起的作用的范围就仅限于所在的那个页面了。而放在pages文件夹外,所管束的范围就是整个文件了。


3.2 如何创建新页面

按照上图操作,添加一行对应代码,保存该文件,就会自动生成对应的页面哦,不需要我们手动操作,是不是很方便呢?
注意:在app.json文件中排在第一个的文件就是我们显示的第一个页面,所以大家要注意一下摆放顺序哦,当然之后的页面排序就没有什么相关性啦。


3.3 如何连接到新页面

在我们知道怎么新建页面之后,大家就会想要说怎么实现页面与页面之间的跳转了,那应该怎么做呢?当然是打开微信小程序的开发文档啦。
到了如上图所在的界面,组件里面其实和我们html里面的标签是一样的,只是标签不一样了而已,使用方式都是一样的。我们通过红框选中的搜索,搜索对应功能的标签,就会出现对应的功能的标签的英文,然后我们就可以使用啦。
根据说明使用标签,然后就可以实现对应功能啦。
比如如下图:
 

3.4 常用标签(组件)

所以现在大家应该对微信小程序有一个初级的认识了吧?其实他一点也不难,我们就是相当于接触一个使用了很多新技术的电视机,我不知道怎么用它,但是他有使用说明,我要做的操作,直接通过查找使用说明,然后实现我们想要的功能就可以了。

 

   感谢源码时代教学讲师提供此文章!
   本文为原创文章,转载请注明出处!
 
#标签:微信小程序,入门