微信小程序开发初学

简介:本篇文章我们能学习到创建微信小程序的方法以及步骤

1. 为什么要学习微信小程序开发

• 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾。
• 推⼴app 或公众号的成本太⾼。
• 它的开发适配成本低。
• 容易⼩规模试错，然后快速迭代。
• 可以跨平台。
• 就业优势增加(能挣到更多钱)

2. 拓展知识:还有其他的小程序,不只是微信有小程序

例如:

• 支付宝小程序
• 百度小程序
• qq小程序
• 抖音小程序

3. 微信小程序开发的环境准备

首先我们要知道什么是微信小程序

我想大多数使用微信的朋友都知道什么是微信小程序

如下:

1. 这些都是微信小程序,我们要开发的就是这玩意儿

2. 那么问题来了,我们既然要开发,就要去测试我们开发的东西

3. 看看我们开发出的效果是什么样子的,不能两眼一蒙,蒙头就干

4. 可是这是小程序,而不是页面,所以我们的小程序效果无法在页面上显示出来

5. 不过别担心,我们有我们专属的测试软件

6. 微信开发者工具下载地址

4. 创建第一个微信小程序

4.1 打开微信开发者工具

注意:第一次使用需要用自己的微信扫码登录哦

4.2 新建一个小程序项目

4.3 填写项目的信息

4.4项目创建成功

我们就可以开始写项目了

怎么样是不是很简单呢~

5. 小程序的结构目录

• ⼩程序框架的⽬标

  ​ 通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务.

• 特点:

  • ⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML (HTML) 和 WXSS (CSS)
  • 以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统
  • 让开发者能够专注于数据与逻辑。

5.1 小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

• 通过以上对比得出,传统web是三层结构.

• 而微信小程序是四层结构,多了一层配置JSON.

5.2 基本的项目目录

详细的微信小程序目录解析

6. 小程序配置文件

一个小程序应⽤程序会包括最基本的两种配置文件。

一种是全局的app.json 和页面自己的page.json

注意：配置文件中不能出现注释

7. 全局配置app.json

• app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
• 普通快速启动项⽬⾥边的 app.json配置。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }
}

字段的含义

1. pages

字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序

⻚⾯定义在哪个⽬录。

8. window页面配置page.json

2. window

字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

• 这里的 page.json 其实用来表示页面目录下的 page.json
• 这类和小程序页面相关的配置。
• 开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。
• 页面的配置只能设置 app.json中部分 window
• 配置项的内容，页面中配置项会覆盖 app.json的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black / white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有效，⽆法在 app.json 中设置该项

个人收获:

• 写配置文件的时候,建议在 微信开发者工具 里面写,因为里面是有提示的.

• 而当我们在写样式或者逻辑的时候,我们可以在 VS code 中去写,比较方便快捷.

9. 注意点

在这里写上新的路径,微信开发者工具会在目录中自动生成全套的文件!

十分方便快捷!

这里是用于修改微信小程序的头部样式的.

注意!!!

属性的值,有些是固定的,有限制的yellowgreen就无法显示出来,因为这个位置现在只支持16进制的写法

10. 总结

今天我们学习了微信小程序开发项目创建

理解了它的配置文件和结构目录

和全局配置app.json的使用

以及我们要在全局配置时的注意点.