微信小程序初学教程

小程序作为当今轻巧的app应用形式在微信用户使用上提供了极大的便捷

申请账号

开发小程序之前需要先注册一个小程序账号,通过这个帐号你就可以管理你的小程序。

账号申请:

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

  • 网址:https://mp.weixin.qq.com

微信小程序初学教程
微信小程序初学教程
接下来设置小程序基本信息
小程序名称、简介、简称、头像、服务类目等
微信小程序初学教程
微信小程序初学教程

小程序开发工具安装

双击下载完成的安装文件,根据提示点击下一步,即可完成安装,安装成功后,可以在桌面或者开始菜单中找到小程序开发工具的快捷方式,打开即可。
微信小程序初学教程
微信小程序初学教程
①项目名称,英文命名,避免中文及其他特殊符号开头
②目录下最后一级,最好改成项目名,方便后期管理浏览
③AppID在小程序后台的设置中查看
④后端服务选择不使用服务器
⑤选择完毕后点击创建,即可生成小程序项目

开启小程序之旅微信小程序初学教程

初次打开后一般都会自动编译预览,如果没有,则点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。
微信小程序初学教程
微信小程序初学教程

项目上传

编写完代码后,在微信开发工具点击上传,将项目上传至网上。

点击上传后,填写小程序项目版本1.0.0(后续每次发布时都要进行修改,便于识别和版本管理),点击上传后,便可以在小程序后台看到发布的版本。
例如:第二次发布时版本为1.0.2,第三次为1.0.3等等… …,每次更新后都可以在后台查看到对应版本。
微信小程序初学教程
开发版—仅仅开发人员和管理员可以浏览项目。

体验版—只要在小程序后台,加入到体验人员名单里,即可扫码体验小程序。

注意:
在发布体验版本之前,只有管理员和开发人员才可以体验使用小程序,其他人员均无法使用。

提交审核

为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。
①在开发者工具中上传了小程序代码之后,登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。
②在开发版本的列表中,点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。

注意:开发者需要严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。

审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。
微信小程序初学教程
点击发布后,即可发布小程序,新发布后的小程序一般会在12-24小时内在客户端更新。

代码包优化

小程序初始代码包限制为 1MB,但后来微信收到反馈说代码包大小不够用,经过评估后放开了这个限制,扩容增加到 2MB 。

开发者:代码包上限的增加对于开发者来说,能够实现更丰富的功能

用户:对于用户来说,增加了下载流量和本地空间的占用。

注意
①开发者在实现业务逻辑同时要尽量减少代码包大小,因为代码包大小直接影响到下载速度,从而影响用户首次打开体验。
②每次在“微信开发工具”上传代码时,都会显示项目代码包的大小;代码包超出限制后会给出相应提示,甚至禁止上传。微信小程序初学教程


小程序目录结构

小程序由配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件以及逻辑代码 JavaScript文件组成。

接下来结合之前的项目,对小程序的代码组成做一个大致的介绍。
html:hyper text markup language超文本标记语言
wxml:weixin markup language微信标记语言

仔细查看之前创建的项目,可以发现项目里生成很多不同类型的文件:

①.json 后缀-----------JSON 配置文件
②.wxml 后缀---------WXML 模板文件
③.wxss 后缀--------- WXSS 样式文件
④.js 后缀--------------JS 脚本逻辑文件

接下来依次分析下每个文件的作用微信小程序初学教程微信小程序初学教程
(1)sitemap.json小程序收录设置
微信现已开放小程序内搜索,你的小程序页面将可能展示在微信搜索等多个公开场景中。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。
默认值:默认所有页面都能被索引,开发中一般不用进行相关配置.

如果不想被搜索到,可以到小程序后台配置其小程序页面是否允许微信索引----->设置-基本设置-隐私设置
微信小程序初学教程
(2)project.config.json项目配置文件
新增项目配置文件:小程序开发者工具在项目的根目录新增了一个项目配置文件project.config.json

作用:
在工具上做的任何配置都会写入到这个文件,当重新安装工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

(3)关闭开发工具中控制台的索引提示
在初始化项目后,打开控制台会看到每打开一个页面,在控制台都会有警告提示
微信小程序初学教程
因为sitemap 的索引提示是默认开启的,所以控制台会有警告提示,并不影响开发。

如何在控制台关闭 sitemap 的索引提示?
方案:在小程序项目配置文件 project.config.json 的 setting 中添加配置字段 checkSiteMap 为 false
微信小程序初学教程
(4)根目录文件
①pages,必须,用于存放页面文件的文件夹
②utils,非必,用于存放公共js的文件夹
③app.js,必须,小程序逻辑文件
④app.json,必须,小程序配置文件
⑤app.wxss,非必,小程序公共样式文件
⑥project.config.json,更新后自带,项目配置文件(无需关注)
⑦sitemap.json,更新后自带,小程序收录设置文件(无需关注)
微信小程序初学教程
小程序级别
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:微信小程序初学教程
5)页面page级别
1、微信小程序是由若干个页面构成的
2、所有的页面内容必须存放在[pages]文件夹下,例如初始化项目中的两个页面index和logs页面都在pages文件夹下
3、在[pages]文件夹下,每个页面都具备一个独立的文件夹

每个小程序页面由四个文件组成,分别是:微信小程序初学教程
规定:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

页面由以下4个文件组成:以pages/index/为例
①index.wxml,必须,页面的结构文件,类似于HTML文档
②index.wxss,非必须,页面的样式表文件,类似于CSS文档
③index.js,必须,页面的逻辑文件,类似于js文档
④index.json,非必须,页面的配置文件(例如页面是否允许下拉刷新、等待icon样式等等)。