zoukankan      html  css  js  c++  java
  • 微信小程序学习-全局配置

    全局配置

    1.app.js

    定义全局数据和全局函数

    定义内容解释:

    • onLanuch 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
    • onShow 当小程序启动,或从后台进入前台显示,会触发 onShow
    • onHide 当小程序从前台进入后台,会触发 onHide
    • onError 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
    • globalData 全局数据,用来存放一些全局的东西,比如统一的远程接口地址等,当然在使用中发现,也可以自定义数据,也能访问到

    数据的访问:

      使用getApp()访问,在需要访问的页面的js中加上 var app=getAPP(),就可以app.XX来访问数据,app.xxx()访问函数

    举例:

    //app.js
    App({
       cookie: {},
        onLaunch: function () {
        },
        globalData: {
            userInfo: null,
            version: "1.0",
            shopName: "商店",
            //sdomain:"http://192.168.0.119:8999/api",
          domain:"https://xx/api",
          static_domain:"https://xx.cn/static/images/mina",
        },
        tip:function( params ){
            var that = this;
            var title = params.hasOwnProperty('title')?params['title']:'提示您';
            var content = params.hasOwnProperty('content')?params['content']:'';
            wx.showModal({
                title: title,
                content: content,
                success: function(res) {
                    if ( res.confirm ) {//点击确定
                        if( params.hasOwnProperty('cb_confirm') && typeof( params.cb_confirm ) == "function" ){
                            params.cb_confirm();
                        }
                    }else{//点击否
                        if( params.hasOwnProperty('cb_cancel') && typeof( params.cb_cancel ) == "function" ){
                            params.cb_cancel();
                        }
                    }
                }
            })
        },
        alert:function( params ){
            var title = params.hasOwnProperty('title')?params['title']:'提示您';
            var content = params.hasOwnProperty('content')?params['content']:'';
            wx.showModal({
                title: title,
                content: content,
                showCancel:false,
                success: function(res) {
                    if (res.confirm) {//用户点击确定
                        if( params.hasOwnProperty('cb_confirm') && typeof( params.cb_confirm ) == "function" ){
                            params.cb_confirm();
                        }
                    }else{
                        if( params.hasOwnProperty('cb_cancel') && typeof( params.cb_cancel ) == "function" ){
                            params.cb_cancel();
                        }
                    }
                }
            })
        },
        console:function( msg ){
            console.log( msg);
        },

    在其他js中引用

    /login.js
    //获取应用实例
    var app = getApp();
    Page({
      data: {
        remind: '加载中',
        angle: 0,
        userInfo: {},
        regFlag:true
      },
      onLoad: function () {
            wx.setNavigationBarTitle({
                title: app.globalData.shopName
            });
            this.checkLogin();
        },
      onShow: function () {
    
      },
      onReady: function () {
        var that = this;
        setTimeout(function () {
          that.setData({
            remind: ''
          });
        }, 1000);
    
    
    
    
      },
    
      checkLogin:function(){
            var that = this;
             wx.login({
                 success:function( res ){
                     if( !res.code ){
                        app.alert( { 'content':'登录失败,请再次点击~~' } );
                        return;
                     }
                     wx.request({
                        url:app.buildUrl( '/member/check-reg' ),
                        header:app.getRequestHeader(),
                        method:'POST',
                        data:{ code:res.code },
                        success:function( res ){
                            if( res.data.code != 200 ){
                                that.setData({
                                    regFlag:false
                                });
                                return;
                            }
    
                            app.setCache( "token",res.data.data.token );
                            //that.goToIndex();
                        }
                    });
                 }
             });
        },
    
      login:function( e ){
            var that = this;
            if( !e.detail.userInfo ){
                app.alert( { 'content':'登录失败,请再次点击~~' } );
                return;
            }
    
            var data = e.detail.userInfo;
            wx.login({
                success:function( res ){
                    if( !res.code ){
                        app.alert( { 'content':'登录失败,请再次点击~~' } );
                        return;
                    }
                    data['code'] = res.code;
                    wx.request({
                        url:app.buildUrl( '/member/login' ),
                        header:app.getRequestHeader(),
                        method:'POST',
                        data:data,
                        success:function( res ){
                            if( res.data.code != 200 ){
                                app.alert( { 'content':res.data.msg } );
                                return;
                            }
                            app.setCache( "token",res.data.data.token );
                            that.goToIndex();
                        }
                    });
                }
            });
        }
    
    
    });

    2.app.json

    全局配置文件,可以配置页面路径、窗口样式、设置网络超时和底部导航。

    • pages用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json.js.wxml.wxss 四个文件进行处理
    • window用于设置小程序的状态栏、导航条、标题、窗口背景色
    • networkTimeout网络超时时间
    • tabBar 的list数组为底部导航的内容,可以设置底部导航的跳转路径,显示文字,图标,选中时的图标,tab 的列表最少 2 个、最多 5 个 tab

    举例:

    pages

    "pages": [
        "pages/my/my",
        "pages/index/index",
        "pages/logs/logs"
      ],

    window:

    属性类型默认值描述最低版本
    navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000  
    navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white  
    navigationBarTitleText string   导航栏标题文字内容  
    backgroundColor HexColor #ffffff 窗口的背景色  
    backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#405f80",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "white"
      },

     

    tabBar:
     
    color HexColor   tab 上的文字默认颜色,仅支持十六进制颜色  
    selectedColor HexColor   tab 上的文字选中时的颜色,仅支持十六进制颜色  
    backgroundColor HexColor   tab 的背景色,仅支持十六进制颜色  
    borderStyle string black tabbar 上边框的颜色, 仅支持 black / white  
    list Array  

    tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

    其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

     
      "tabBar": {
        "color": "#6e6d6b",
        "selectedColor": "#e64340",
        "borderStyle": "black",
        "backgroundColor": "#fff",
        "list": [
          {
            "pagePath": "pages/index/index",
            "iconPath": "images/tabbar/ic_menu_choice_nor.png",
            "selectedIconPath": "images/tabbar/ic_menu_choice_pressed.png",
            "text": "首页"
          },
          {
            "pagePath": "pages/my/my",
            "iconPath": "images/tabbar/ic_menu_me_nor.png",
            "selectedIconPath": "images/tabbar/ic_menu_me_pressed.png",
            "text": "我的"
          }
        ]
      },

     

     
     
     
     

    3.app.wxss

    小程序公共样式表
    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    } 

    4.project.config.json

    项目配置文件,AppID、项目的接口等详细信息
    {
    	"description": "项目配置文件。",
    	"setting": {
    		"urlCheck": true,
    		"es6": true,
    		"postcss": true,
    		"minified": true,
    		"newFeature": true,
    		"coverView": true,
    		"autoAudits": false,
    		"showShadowRootInWxmlPanel": true,
    		"scopeDataCheck": false,
    		"checkInvalidKey": true,
    		"checkSiteMap": true,
    		"uploadWithSourceMap": true,
    		"babelSetting": {
    			"ignore": [],
    			"disablePlugins": [],
    			"outputPath": ""
    		}
    	},
    	"compileType": "miniprogram",
    	"libVersion": "1.9.94",
    	"appid": "wx953fxxxxxxxxxx",
    	"projectname": "test_mina",
    	"isGameTourist": false,
    	"simulatorType": "wechat",
    	"simulatorPluginLibVersion": {},
    	"condition": {
    		"search": {
    			"current": -1,
    			"list": []
    		},
    		"conversation": {
    			"current": -1,
    			"list": []
    		},
    		"game": {
    			"currentL": -1,
    			"list": []
    		},
    		"miniprogram": {
    			"current": -1,
    			"list": []
    		}
    	}
    }
     
  • 相关阅读:
    Delphi的 Format格式化函数
    Delphi的Trim函数
    Delphi容器类之---Tlist,TStringlist,THashedStringlist的效率比较
    Delphi容器类之---TOrderedList、TStack、TQueue、TObjectStack、TObjectQueue
    Delphi容器类之---TList、TObjectList、TComponentList、TClassList
    Delphi的分配及释放---New/Dispose, GetMem/FreeMem及其它函数的区别与相同
    Delphi容器类之---TList、TStringList、TObjectList,以及一个例程的代码分析
    Linux C编程学习6---字符串处理、数据转换
    Linux C编程学习之开发工具3---多文件项目管理、Makefile、一个通用的Makefile
    Linux C编程学习之开发工具2---GDB调试器
  • 原文地址:https://www.cnblogs.com/xiao-apple36/p/12785691.html
Copyright © 2011-2022 走看看