微信小程序第一个HELLO WORD程序

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

微信小程序第一个HELLO WORD程序

1，文件分布结构：

│ app.wxss
│ app.js
│ app.json
│
├─pages
│ ├─index
│ │ index.js
│ │ index.wxml
│ │ input.wxml
│ │ index.wxss
│ │
│ ├─main
│ │ main.wxss
│ │ main.js
│ │ main.wxml
│ │
│ └─logs
│ logs.js
│ logs.json
│ logs.wxss
│ logs.wxml
│
└─utils
util.js

2，业务逻辑部分

对于不同的项目，根据其具体的业务逻辑表现，文件有不同的组织方式，但基本元素(页面Page)的结构不变。
在helloworld项目中，如上图绿色所示为：pages/utils。
pages：该文件夹下存放不同的业务逻辑页面，在这里为index文件夹(主页面)，logs文件夹(log页面)。
utils：该文件夹下存放工具类函数，并通过module.exports导出formatTime来供其他文件调用。

3,程序主体部分

由三个文件组成，必须放在项目的根目录,就是app.wxss、app.js、app.json  
1. app.json 是微信小程序的全局配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。 

    {
      "pages":[  
        "pages/index/index",  
        "pages/logs/logs"  
      ],  
      "window":{  
        "backgroundTextStyle":"light",  
        "navigationBarBackgroundColor": "#BF0000",
        "navigationBarTitleText": "Hello Word",
        "navigationBarTextStyle":"#FFFFFF"
      },
        "debug": true
    }

说明：
*  pages：pages接受一个字符串数组，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。  
小程序中新增/减少页面，都需要对pages数组进行修改。pages中的路径为相对路径。文件名不需要写文件后缀，因为MINA会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。  

*  window：用于设置小程序的状态栏、导航条、标题、窗口背景色。
*  debug：是输出调试信息


2.app.wxss 
   WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言，用于描述WXML的组件样式，也用来决定WXML的组件的显示方式。从定位上讲WXSS相当于css 
   /**app.wxss**/

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }
    
    .mui-bar-tab {
        bottom: 0;
        display: table;
        width: 100%;
        height: 50px;
        padding: 0;
        table-layout: fixed;
        border-top: 0;
        border-bottom: 0;
    
    }

4.页面代码说明：

1.index.js       
//index.js  
//获取应用实例  

//index.js  
//获取应用实例  
 var app = getApp()  
        Page({  
            data: { 
                motto: 'Hello World',   
                userInfo: {},   
                item: { 
                    index: 0,   
                    msg: 'this is a template',  
                    time: '2016-09-15'  
                }   
            },  
            //事件处理函数      
            bindViewTap: function() {
                wx.navigateTo({
                    url: '../logs/logs' //转到logs页面    
                })
            },
            viewTap: function() {
                console.log('view top');
                //设置一个memberName的值  
                this.setData({
                    memberName: {
                        value: 'ylong52'
                    }
                })
                //转到navigateTo页面  
                wx.navigateTo({
                    url: '../index/input'
                })
            },
            onLoad: function(options) {
                console.log(options)
                var that = this
                this.setData({
                    title: options.title
                })
                //调用应用实例的方法获取全局数据
                app.getUserInfo(function(userInfo) {
                    //更新数据
                    that.setData({
                        userInfo: userInfo
                    })
                    that.update()
                })
            }
        })
 

注：有一些事件是我做测试放进去的。如：bindViewTap，app.getUserInfo。学习使用，无其它意议

2. index.wxml和index.wxss 是对index页面html结构和css样式的控制。略

转载于:https://my.oschina.net/7795442/blog/778729