微信小程序 之 Hello World!
微信小程序 之 Hello World!
- 前言
- 正文
- 一、微信开发者注册
- 二、开发工具下载
- 三、工具安装
- 三、创建项目
- 1. 获取正式号AppID
- 2. 使用测试号AppID
- 四、项目结构讲解
- 1. app.js
- 2. app.json
- 3. app.wxss
- 4. project.config.json
- 5. sitemap.json
- 6. pages
- 7. utils
前言
在做微信小程序之前，最好要有一些JavaScript和Html、css的基础，不过没有也没关系，学习中慢慢了解也可以，只不过你需要花费的时间就多一些。
正文
微信小程序的开发常规是使用微信开放平台提供的工具，因此本文会从账号注册到工具安装，再到项目运行，这种方式进行讲解。开始吧！
一、微信开发者注册
点击微信公众平台进入。
直接用你手机上的微信扫描这个二维码进行登录，这里的账号类型有三个，服务号、订阅号、小程序。
扫码之后，你的手机上就会显示之前创建的微信公众平台上创建过公众号或者小程序。如果你都没有创建的话，就直接登录。
然后进行开发工具的下载。
二、开发工具下载
点击开发者工具下载
我这里就下载这个稳定版
下载的是一个exe可执行文件，下载后双击进行安装
三、工具安装
下一步
我接受
更换一下安装的路径
安装过程中，等待。
完成，运行这个工具。
三、创建项目
用自己的手机微信扫描登录一下：
登录之后你会在左下方看到自己的微信头像，下面来创建一个小程序吧，点击右边的这个加号。
这里我修改了项目的名称和存放目录，然后是这个AppID，这里有正式和测试的区别，先来看一下正式号AppID怎么获取
1. 获取正式号AppID
这里可以手动去注册一个正式的AppId，点击注册，会进入到小程序注册页面，输入一个未注册过的邮箱。
注意标注的文字，这很重要，所以当你要进行小程序的开发时，最好是新建一个邮箱去注册，可以减少不必要的麻烦。
当资料填写完成之后点击注册按钮。
然后登录填写的邮箱，去查看最新收到的邮件
点击这个链接，进行邮箱账号的激活，点击之后会进行用户信息登记
这里我选择的是个人，然后会出现一个二维码，使用手机微信进行扫描，扫描的用户将会成为管理员。
注册成功，点击前往小程序。
点击填写按钮，对小程序的相关信息进行填写。
当你的小程序名称和已经注册过得小程序名称大致相同时，会有一个提示。
点击仍然使用。
选择图标进行和填写描述以及小程序的类型，都填写好了之后点击底部的提交按钮。提交之后其实你的AppID就生成好了，
选择小皮天气，
2. 使用测试号AppID
或者点击右边的测试号，这个就很简单了，点击获取的一个测试的AppID。如果你的小程序是要发布的，那么建议你使用正式号AppID。
点击新建，等待项目创建完成。
你会看到给你添加了默认的页面index,然后就是你的微信头像，以及一个HelloWorld。
这里就是模拟器了，一般在开发过程中都是在模拟器中调试运行的，因为你如果要运行的自己的手机微信上，编译的过程比较长。
下面尝试运行到手机上。
点击这个真机调试。
手机微信扫描这个二维码，然后你就会看到你的手机上有这个小程序了。
因为是本身是搞Android开发的，所以这个过程我的感觉就像是通过usb连接了手机和电脑，然后在AS上编译项目安装APK到手机上，而此时这个APK是只能自己调试使用的，同理刚才这种方式产生的小程序也是调试使用的，属于开发版，你可以在微信的小程序列表中看到。
这就是刚才安装的小程序，你点击一下就会打开，不过这个和网速有关系。这个就相当于一个debug版apk，只能自己使用。
四、项目结构讲解
可以看到，从刚才的微信小程序的项目创建到运行，我没有写过代码。那么在运行的时候却能看到我的微信头像和这个HelloWorld，这说明在创建项目的时候自动给我们生成了一些代码，就比如AS创建一个新项目会默认有一个MainActivity一样，同时这个Activity还是启动页面，那么我觉得有必要去了解这个小程序的项目结构，这样以后写的时候就不会迷糊了。
上图就是这个小程序的项目结构。
上面两个文件夹pages和utils后面将，先看下面的文件。
1. app.js
看看里面的代码：
这里看到了一个本地存储和一个登录，这些都是功能的实现函数，那么这里面就是一些业务逻辑代码。那么小程序的逻辑就在这里。
2. app.json
看看里面的代码
上方这里有一个pages的数组，里面是小程序当前已有的页面，后面又有一个window表示窗体的样式，下面还制定了样式的版本，那么毫无疑问，这是一个公共配置文件，当你的小程序增加或者删除页面时和这个app.json都有关系。app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、多设置多Tab等。
3. app.wxss
看看里面的代码：
很明显这是一个样式文件，用来控制小程序的页面样式。
4. project.config.json
这是一个项目配置文件。你的appid可以在这里做更改，就比如你之前是测试的，你想改成正式的，就在这里面操作。
5. sitemap.json
文件用来配置小程序及其页面是否允许被微信索引。
下面来看这个page
6. pages
这是一个页面文件夹，你的小程序的页面都在这个下面，现在它里面有两个页面。
你可以看到这里的两个页面各自有四个文件，就拿index来说明。
- index.js 页面逻辑
- index.wxml 页面结构
- index.json 页面配置
- index.wxss 页面样式表
基本上每一个页面都会有这个四个文件。为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。可以看到都在index文件夹下，文件名一致，只是文件类型不同而已。
7. utils
这个文件夹下有一个util.js，这是一个工具js文件，
那么很明显这个文件夹就用放置一些工具js文件的，这个默认的里面目前是对时间的处理。项目结构基本上介绍完了，后面的实际开发中会有相应的更改说明。
好了，本文就到这里，对于小程序我也是刚入门，一起学习与进步，感谢您的阅读，上高水长，后会有期。
微信小程序 之 Hello World!相关推荐
- 微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现 下面看一个简单的demo 传递数据 要传递界面 wxml <!--index.wxml--> <view class= ...
- 微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页 例如想 嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
- 微信小程序下拉刷新和上拉加载
效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...
- 微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡 下面会有一个demo给出解释, ...
- 微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表 其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变 简单的就是在xml中判断下就行了 <view class='recharge_t ...
- 微信小程序import和include
import 和include 是微信小程序提供的2中引用方式 import 一般结合模板template使用 import import可以在该文件中使用目标文件定义的template,如: 在 i ...
- 微信小程序扫描二维码
最近官方地址 看到这句话我想到了,微信小程序是调用微信的扫一扫 那么扫一扫的界面就可以不用再写了, 想到android这边都是用图片或者手动画,突然感觉心情特别的好, 里面的参数自己看吧,看到最下面的 ...
- 微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
- 微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图 实现原理 采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...
- map和foreach的区别和应用场景_支付宝小程序和微信小程序，两者有何区别？
原标题:支付宝小程序和微信小程序,两者有何区别? 自2017年1月微信推出小程序之后,小程序的发展势头便愈来愈猛.作为腾讯老对头的阿里,也开始投入小程序的研发.在一年多的开放公测后,支付宝小程序终于于 ...
最新文章
- 2018.3.29 网页中嵌套网页的两种方法
- 计算机光驱参数,请问,电脑光驱插入关盘,打开时显示“参数不正确,无法打开”,这是什么故障,怎么处理?...
- Py之xlwt：python库之xlwt的简介、安装、使用方法之详细攻略
- 单核工作法18：简化协作（下）
- 悲剧的程序员用程序写出的爱情
- python文件读写_python基础-文件读写'r' 和 'rb'区别
- IIS7.0下 HTTP 错误 404.15 - Not Found 请求筛选模块被配置为拒绝包含的查询字符串过长的请求...
- ningbooj--1655--木块拼接（贪心）
- linux下文件以及目录权限修改（摘抄）
- figma下载_Figma中的动态内容和颜色
- 2015-2016 Northwestern European Regional Contest (NWERC 2015)
- JTS(Geometry)工具类
- 一把数学上完美的尺子（哥隆尺）
- IT计算机行业都有哪些证可以考
- 单向可控硅和双向可控硅的详细介绍（含引脚的分辨）
- 机器学习实战——训练模型
- SAP BOM物料清单详解
- Java学习day1--markdown使用、Dos命令、JAVA特性与安装
- bugku_托马斯.杰斐逊解题报告
- 对抗式学习pythonC day1 菜鸟档案