【系分】微信小程序开发入门（一）

开发准备

微信小程序官方教程

下载开发工具

 正式开发

1.   添加项目，输入AppID，选择项目目录创建新文件夹，若文件夹为空，系统就会自动创建整个项目架构

【注意：记得勾选quickstart项目】

 

2.   自动创建的项目有以下架构目录：菜单栏，页面效果显示，代码架构目录，代码栏

着重讲解代码架构目录：app.js、app.json、app.wxss

 

app.js是小程序的脚本代码。

我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。

 

它是JavaScript的代码。较重要的是App里面包含的两个常用方法onLaunch（小程序启动的时候执行的方法）、getUserInfo（自定义的方法用于获取用户信息） 。

【详情查阅微信API文档微信API文档：https://developers.weixin.qq.com/miniprogram/dev/api/】

 

app.json是对整个小程序的全局配置。

我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。

【注意：该文件不可添加任何注释】

 

它主要包含以下几个配置： 
·pages：页面路径的数组，表示小程序要加载的所有页面，其中数组第一项代表小程序的初始页面。 
·window：微信原生功能，定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。 
·tabBar：微信原生功能，定制化不强。适用于常规的Tab应用，Tab栏可置于顶部或底部；tabBar是一个数组，仅支持2-5个tab。 
·networkTimeout：配置小程序网络请求的超时时间。 
·debug：调试模式开关，开发模式下建议开启，正式发布别忘了关闭。

 

样例1：设置导航栏的标题为商城，字体为白色，背景为黑色

"window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#000",

    "navigationBarTitleText": "商城",

    "navigationBarTextStyle":"white"

  }

在app.json下把上面的代码替换如window中

 

样例2：增加一个界面

"pages":[

    "pages/index/index",

    "pages/logs/logs",

    "pages/addPage/addPage"

  ]

在app.json里的pages属性加入你要的路径（如pages/addPage/addPage），路径写好后系统会自动建好文件

 

app.wxss是整个小程序的公共样式表。

我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

wxss样式总结如下：

 display属性 
- none:此元素不会被显示 
- block：两个元素自动换行 
- inline：两个元素靠在一起 
- inherit：继承父类 
- flex：多栏多列 
2. flex-direction: 
- column 垂直分布 
- row 水平分布 
3. flex-wrap： 
- nowrap item溢出不换行 
- wrap 超出的item跳到下一行 
4. justify-content属性 
- flex-start：左对齐 
- flex-end：右对齐 
- center：居中 
- space-between ：item中间留出等间距 
- space-around：环绕item流程等间距 
5. align-items item 边界线对齐方式 
- flex-start | flex-end | center | baseline |stretch 
6. border-bottom 边界线 
- 举个栗子 1px solid #ccc; 
7. align-items item 边界线对齐方式 
- flex-start | flex-end | center | baseline |stretch 
8. overflow-x 内容超过边框处理方式 
- visible 显示超出的内容 
- hidden 隐藏超出的内容 

- auto 自动加入滚动条

参考文档：

https://blog.csdn.net/u012927188/article/details/72629342