微信小程序入门第一天

一,开发流程

二,准备工作

1,下载并安装好开发工具:微信小程序开发工具

2,初步了解小程序开发相关文档

三,创建第一个小程序

1,打开开发者工具并登录后,出现以下界面,

点击小程序项目,出现以下界面,在项目目录中选择目录结构,在填入AppID后下面有一个建立普通快速启动模板,将前面的勾默认勾选上,然后点击确定,它就会帮我们创建一个简单的下程序。创建后界面为下面第三张图

注意:如何获取AppID?

在申请账号后,在小程序管理平台可以自己的小程序进行管理,比如设置小程序的权限,查看数据报表,发布小程序等操作。登录 https://mp.weixin.qq.com ,可以在菜单 “设置”-“开发设置”看到小程序的AppID了


四,架构分析

1, 文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下

一个小程序页面由四个文件组成,分别是:

2,文件作用

从上面知道有以下四种文件类型:

 .json  后缀的 JSON 配置文件

 .wxml  后缀的 WXML   模板文件

.wxss  后缀的 WXSS  样式文件

.js  后缀的 JS  脚本逻辑文件

接下来看下这四种文件的作用

(1)JSON 配置

小程序配置 app.json

app.json 是对当前小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口的背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。默认生成项目的 app.json 配置内容如下:

以下为配置选项

pages:接受一个数组,每一项都是字符串,来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。

如要增加一个新的界面可以这样做:

重新编译后可以发现目录结构发生变化,新加了一个first  的文件夹

window:用于设置小程序的状态栏,导航条,标题,窗口背景色,具体属性详见API 文档。如要设置导航栏的标题为捡拾书香,字体为白色,背景为黑色可以这么做:

tabBar :指定tab 栏的表现,以及tab 切换时显示的对应页面

注意:tabBar可以在页面上部,也可以在下部。tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序

如设置两个tab 栏,效果如下

可以这样设置

networkTimeout :可以设置各种网络请求的超时时间

debug: 可以在开发者工具里开启 debug模式,在开发者工具的控制台面板,调试信息以 info 的形式输出,其信息有 Page 的注册,页面路由,数据更新,事件触发可以帮助开发者快,速定位一些常见的问题。

工具配置project.config.json

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

页面配置page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

如在first.json 里配置如下内容:

(2)WXML 模板

起到网页编程中的HTML 的作用,用于描述当前页面的结构。内容如下:

(3)WXSS 样式

WXSS 具有 CSS 大部分的特性,

(4)JS  交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

 

 

阅读更多
版权声明: https://blog.csdn.net/Cinny1/article/details/79954513
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭