微信小程序开发手记《一》：项目的代码结构

2019独角兽企业重金招聘Python工程师标准>>>

编码前的准备工作

• 登陆微信开发者账号。 
  如有账号，直接登陆，没有，申请一个即可。输入账号密码登陆时，需要手机扫码确认。

• 查看文档 
  登陆后台后，在网页右上角，点击文档，就能进入文档界面，与我们密切相关的就是开发模块 

  

可以看到，在开发模块中又细分了6个子模块。

• 简易教程 
  这个子模块中有官方提供的组件+API的演示demo，还可以扫码安装demo小程序，同时，也能从这里下载开发工具。

• 框架 
  这里介绍的是小程序的项目结构

• 组件 
  介绍所有的组件及使用方法

• API 
  介绍所有的API，包括获取用户信息，本地缓存，支付功能等。

• 工具 
  提供小程序开发所使用的小工具的下载地址

• Q&A 
  提供了一些问题的答案，同时还有开发者社区。

打开开发工具

• 第1张图是打开开发工具时的第一个界面，需要扫码登陆。
• 第2张图是扫码成功后的界面，点击第一个小程序开发。
• 第3张图，在这里可以添加项目，也可以打开之前的项目。如果是第一次打开，那么只有添加项目的按钮，点击添加项目。
• 第4张图，在第一个输入框内需要使用AppID，获取的方式查看这里。 

  

   

  

  

ok！经过了上面4步，我们终于打开了开发工具 

 
上图展示的是编辑状态下的结构

• 第2个绿框是小程序运行的界面，相当于模拟器

• 第3个黑框是项目代码的结构数

• 第4个黄框是我们编辑代码的地方。

• 第1个红框中，有如下6个部分

  • 编辑，上面说的就是编辑状态
  • 调试，在这里可以查看控制台，一些打印能在这里看到
  • 项目，这里有一个预览功能，可以通过扫码，将我们的小程序安装到手机上。
  • 编译，顾名思义，就是编译小程序代码。ctrl+s保存代码时，也会编译一次。
  • 后台/前台，前台时展示场景值，也可以在这里查看场景值。
  • 缓存，在这里可以清除3种缓存，数据存储，文件存储，授权数据。

下面，我们说一下项目结构，也就是上图中第3个框和第4个框。

项目结构

这部分对应文档中的框架部分。 
一个完整的小程序，包含描述整个项目的app文件系统（app.js，app.json，app.wxss）和各个page（每个page包含js，json，wxml，wxss）。其中，js文件处理逻辑，json存放配置，wxml存放页面结构，wxss存放样式表。

• app文件系统 
  app.js，app.json，app.wxss这3个文件放在项目的根目录下，其中app.wxss文件不是必须的，不过一般都会将项目中通用的样式放在这里。

• page文件系统 
  它包含4个文件：js（必须），wxml（必须），json（非必须），wxss（非必须）。

下面，我们挨个介绍

app.wxss

它是小程序的公共样式表，结构如下，首先是一个小数点.加上别名，之后就是一对大括号，在大括号内设置属性，键值对用冒号分割，键值对后面有分号； 
关于如何使用其中的设置，我们会在页面的wxml时说到。

1. .container {
2. height: 100%;
3. display: flex;
4. flex-direction: column;
5. align-items: center;
6. justify-content: space-between;
7. padding: 200rpx 0;
8. box-sizing: border-box;
9. }

app.json

该文件中存放的公共配置，格式就是json，其中pages是必须要配置的，程序中的每一个页面，都需要在这里配置，否则页面会找不到。 
window属性配置的是一些窗口属性。 
想要看其它的配置，请点击这里。

1. {
2. "pages":[
3. "pages/index/index",
4. "pages/logs/logs"
5. ],
6. "window":{
7. "backgroundTextStyle":"light",
8. "navigationBarBackgroundColor": "#fff",
9. "navigationBarTitleText": "WeChat",
10. "navigationBarTextStyle":"black"
11. }
12. }

app.js

这里处理小程序的逻辑，更详细的内容，请点击这里。

1. App({
2. onLaunch: function () {
3. //调用API从本地缓存中获取数据
4. var logs = wx.getStorageSync('logs') || []
5. logs.unshift(Date.now())
6. wx.setStorageSync('logs', logs)
7. },
8. getUserInfo:function(cb){
9. var that = this
10. if(this.globalData.userInfo){
11. typeof cb == "function" && cb(this.globalData.userInfo)
12. }else{
13. //调用登录接口
14. wx.login({
15. success: function () {
16. wx.getUserInfo({
17. success: function (res) {
18. that.globalData.userInfo = res.userInfo
19. typeof cb == "function" && cb(that.globalData.userInfo)
20. }
21. })
22. }
23. })
24. }
25. },
26. globalData:{
27. userInfo:null
28. }
29. })

整个js程序就是一个App方法，onLaunch是回调方法，getUserInfo是自定义方法，globalData是自定义变量。

page的wxml文件

一个文件夹，就是一个页面，如果特别说明，下面说的js文件，wxss文件，wxml文件，json文件都处于同一个文件夹下。

1. <view class="container">
2. <view bindtap="bindViewTap" class="userinfo">
3. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
4. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
5. </view>
6. <view class="usermotto">
7. <text class="user-motto">{{motto}}</text>
8. </view>
9. </view>

这与xml文件类似，最外面的view标签上有一个class属性，这个属性用于设置view的一些属性，属性值Container则指向这些我们设置的属性集，有2种可能性，一种是自身所在page的wxss文件，另一种则是app.wxss文件，而container属于app.wxss中的配置。

还有一点，在app.wxss中，container前面是有个小数点的，wxml中调用时，不需要小数点。 
第2级中有2个view标签，其中第一个上面有2个属性，class和bindtap，其中class属性与上面说过的一样，它指向了本页的wxss文件，第2个bindtap指的是点击时间，它的属性值是点击时触发的js方法，它位于本页的js文件中，我们来看一下。

1. Page({
2. ...
3. //事件处理函数
4. bindViewTap: function() {
5. wx.navigateTo({
6. url: '../logs/logs'
7. })
8. },
9. ...
10. })

可以看到bindViewTap方法，bindViewTap相当于一个别名，真正的方法是后面的function()。 
接着看该标签的第3级标签

1. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

这是一个image标签，class属性不必说，src属性指的肯定是图片的地址，有趣的是属性值的表达方式。2个嵌套的大括号{{}}内是变量值，这个变量在js文件的data里，data对应的值符合json格式，如下

1. Page({
2. data: {
3. motto: 'Hello World',
4. userInfo: {}
5. },
6. ...
7. onLoad: function () {
8. console.log('onLoad')
9. var that = this
10. //调用应用实例的方法获取全局数据
11. app.getUserInfo(function(userInfo){
12. //更新数据
13. that.setData({
14. userInfo:userInfo
15. })
16. })
17. }
18. })

能够看到userInfo是一个对象，而它的初始化也在js中，具体的赋值过程，我们说js文件时再详述。 
第3级标签中还有一个text标签

1. <text class="userinfo-nickname">{{userInfo.nickName}}</text>

它的值也是一个变量，与image标签类似。 
在第2个二级标签，里面有一个text标签，它的值也是变量，在js文件的data中。

1. <view class="usermotto">
2. <text class="user-motto">{{motto}}</text>
3. </view>

page的wxss文件

它与app.wxss一样，都是一些样式，不同的是app.wxss的作用域是整个应用，而页面的wxss文件只能在本页内使用。

1. .userinfo {
2. display: flex;
3. flex-direction: column;
4. align-items: center;
5. }
6.  
7. .userinfo-avatar {
8. width: 128rpx;
9. height: 128rpx;
10. margin: 20rpx;
11. border-radius: 50%;
12. }
13.  
14. .userinfo-nickname {
15. color: #aaa;
16. }
17.  
18. .usermotto {
19. margin-top: 200px;
20. }

page的json文件

一般用来设置当前页的导航栏，格式如何json格式。

1. {
2. "navigationBarTitleText": "查看启动日志"
3. }

page的js文件

js文件处理代码逻辑

1. //获取应用实例
2. var app = getApp()
3. Page({
4. data: {
5. motto: 'Hello World',
6. userInfo: {}
7. },
8. //事件处理函数
9. bindViewTap: function() {
10. wx.navigateTo({
11. url: '../logs/logs'
12. })
13. },
14. onLoad: function () {
15. console.log('onLoad')
16. var that = this
17. //调用应用实例的方法获取全局数据
18. app.getUserInfo(function(userInfo){
19. //更新数据
20. that.setData({
21. userInfo:userInfo
22. })
23. })
24. }
25. })

上面的代码中，显示通过getApp()方法获取到应用实例。之后就是一个Page方法，在大括号中，有3部分

• data，它里面是页面所需的变量，书写方式完全符合json格式。motto是字符串，userInfo是对象。

• bindViewTap，响应点击的方法，它是一个别名，在wxml中调用了这个方法。

• onLoad()，是Page的回调方法，当页面加载时会自动加载这个方法，其它的回调方法请看这里。

我们来看一下onLoad方法

1. onLoad: function () {
2. console.log('onLoad')
3. var that = this
4. //调用应用实例的方法获取全局数据
5. app.getUserInfo(function(userInfo){
6. //更新数据
7. that.setData({
8. userInfo:userInfo
9. })
10. })
11. }

方法的结构如下：

1. 别名：function(Param){
2.  
3. }

参数Param非必须，视情况而定。 
再看onLoad方法，在方法内部

• 在控制台打印输出’onLoad’
• 将当前应用的实例赋给变量that
• 调用app的方法，获取用户信息。

1. app.getUserInfo(function(userInfo){
2. //更新数据
3. that.setData({
4. userInfo:userInfo
5. })
6. })

app是我们在js文件一开始就获取到的应用实例，可以理解为app.js的实例，之后调用app.js里的getUserInfo方法，我们来看一下app.js

1. App({
2. ...
3. getUserInfo:function(cb){
4. ...
5. },
6. ...
7. })

可以看到，确实有getUserInfo方法，并且该方法还需要一个参数。

• 更新数据，调用setData方法来刷新数据，将通过getUserInfo获取到的userInfo传递给data中的userInfo变量。

1. that.setData({
2. userInfo:userInfo
3. })

ok，至此，小程序的结构完毕。下面我们来具体使用一下组件。

转载于:https://my.oschina.net/dreawercn/blog/1031489