微信小程序笔记整理--入门篇。

7-2 微信小程序入门篇

准备篇

1.登录网址，https://mp.weixin.qq.com  注册一个微信小程序。

2.获取微信小程序appid，登录自己的小程序后台，在开发者设置中获得appid。

3.下载微信开发者工具，创建项目。输入appid，和项目名即可。

4.js是脚本文件， json是配置文件，wxss是样式表文件。小程序读取这些文件，生成小程序实列。

5.app.js是小程序的脚本代码，儿科与你监听并处理小程序的生命周期，声明全局变量。
  调用框架提供丰富的API

案列，调用同步存储服务和同步读取本地数据。
    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
        }
    })

6.app.json是对整个小程序的全局配置，页面组成，窗口背景色，导航条样式，默认标题等。
    这个文件不可添加任何注释。

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

    }

7.wxss是整个小程序的公共样式表。可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。

.container{
    height:100%;
    display:flex;
    flex-direction:column;
}

8.页面？
    每个页面都要写在app.json的pages中，第一个页面时小程序的首页。
    每个页面是由同路径下同名的四个不同后缀文件的组成。

    index.js       页面的脚本文件，监听处理页面的生命周期函数，获取实列，声明并处理数据。响应页面交互事件。
//    获取应用实列
    var  app  = getApp（）

    onLoad:function(){
        console.log('onLoad')
        var that = this
        //调用应用实列的方法获取全局数据
        app.getUserInfo(function(userinfo)){
            //更新数据
            that.setData({
                userInfo:userInfo
            })
        }
    }

    index.wxml   页面结构文件。
    index.wxss     页面的样式规则会覆盖app.wxss中的样式规则。
    index.json     页面的配置项会覆盖app.json中的相同配置项。