二维码生成器小程序搭建

首先我们要明确小程序需要哪几种文件。

微信小程序中就四种类型的文件：

js ---------- JavaScrip文件

json -------- 项目配置文件，负责窗口颜色等等

wxml ------ 类似HTML文件

wxss ------- 类似CSS文件

在根目录下用app来命名的这四种类型的文件，就是程序入口文件。具体介绍如下：

app.json
必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，
你只需创建这个文件，里面写个大括号就行。以后我们会在这里对整个小程序的全局配置。记录了页面组成，配置小程序的窗口 背景色，配置导航条样式，配置默认标题。

app.js
必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写
以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss
这个文件不是必须的。因为它只是个全局CSS样式文件

app.wxml
这个也不是必须的，而且这个并不是指主界面哦~因为小程序的主页面是靠在JSON文件中配置来决定的
有了这两个文件你运行程序，IDE就不会报错了。

接下来我会向大家介绍一下商城小程序小程序

首先先向大家展示一下效果。

 1.app.js

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs);
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    
    userInfo:null
  }
})

2.aap.json

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

3.app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

后期我会定期发布小程序源码,有时候会在公众号（友友集结地）