微信小程序入门（第一天）

秒速五厘米 2023-06-12 15:28 4阅读 0赞

先体验一下

![20191113141130218.png][]

微信小程序第一个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()
                    })
                }
            })

![20191113141112625.png][]

[20191113141130218.png]: https://img-blog.csdnimg.cn/20191113141130218.png
[20191113141112625.png]: https://img-blog.csdnimg.cn/20191113141112625.png