微信小程序初学自用方法小结_微信小程序周记-CSDN博客

本文链接：https://blog.csdn.net/fanzhongcang/article/details/84862337

小结

上手+常用的方法

上手+常用的方法

小程序的生命周期

app.js

onLaunch:当小程序初始化完成时会触发,全局只触发一次.
onShow:当小程序启动,或从后台进入前台显示会触发.
onHide:当小程序从前台进入后台会触发.(从看不到到看到小程序表示进入前台,后台指点击左上
其他page页的生命周期

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var temp = this;
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

常见配置文件

讲解app.json主配置文件,小程序启动时先找app.json(图一,图二,图三,图四)
主要定义一些公共变量配置

  {
            "pages":[
    
             "pages/index/index",        //小程序一进来会先到第一行的页面
    
             "pages/logs/logs",
    
             //每新增页面都要在这里定义,直接在这里加上后会自动建4个页面
    
            ],
    
            "window":{
    
                "navigationBarBackgroundColor": "#31c27c",  //导航条北京颜色(常用)
    
             "navigationBarTitleText": "QQ",             //导航条文字(常用)
    
             "navigationBarTextStyle":"white"            //导航条文字样式
    
             "enablePullDownRefresh":true,               //是否开启下拉刷新
    
                "backgroundColr":'#000',                    //下拉窗口的背景色
    
             "backgroundTextStyle":"dark",               //背景文字颜色
    
             "onReachBottomDistance":"50",               //页面上拉触底事件触发时距页面底部距离,单位为px
    
            },
    
            "tabBar": {
    
             "color":"#000", //tab上的文字默认颜色
    
             "selectedColor":"#E22018", //tab上的文字选中时的颜色
    
             "backgroundColor":"#1195EE", //tab的背景色
    
             "position":"top",           //图片不会显示
    
             "list": [
    
	             {"pagePath":"pages/index/index"},                 //必跳转页面路径,需在pages中先定义
	    
	             {"text":"文字"},                            //必,tab上按钮文字
	    
	             {"iconPath":"路径"}, //图片路径,建议为81px*81px,positon为top时无效
	    
	             {"selectedIconPath":"路径"} //选中时的图片路径,建议为81px*81px,positon为top时无效
    
             ]
    
            },
    
            "networkTimeout":{
    
                //在微信小程序中有多种网络连接API,例如request连接,socket网络连接,上传文件,下载文件等网络操作的API.在主配置文件app.json中可通过参数networkTimeout设置各种网络请求的超时时间.
    
            },
    
            "debug":false,
    
        }

常用方法,api

获取用户信息
// 获取用户信息
wx.getSetting

wx.getSetting({
success: res => {
console.log(“app.jswx.getSetting”)
console.log(res)
if (res.authSetting[‘scope.userInfo’]) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: res => {

           // 可以将 res 发送给后台解码出 unionId
           this.globalData.userInfo = res.userInfo

           // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
           // 所以此处加入 callback 以防止这种情况
           if (this.userInfoReadyCallback) {
             this.userInfoReadyCallback(res)
           }
         }
       })
     }
   }
 })

获取登录信息code

// 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log("wx.login")
        console.log(res)
       
      }
    })

设置全局变量
在app.js里边
定义

globalData: {
    userInfo: null,
    baseUrl:'www.baidu.com'
  }

在index.js取
page外

//index.js
//获取应用实例
const app = getApp()

获取代码

app.globalData.userInfo = res.userInfo

webview判断是否为在小程序方法

 /*
     *看到帖子说安卓的webview UA带有miniprogram，而iOS没有而iOS的window.__wxjs_environment === 'miniprogram'是有效的，部分安卓似乎无效
     *那么可不可以这么判断, 以获得一个准确的结果：
     */
    judgeWxMiniProgram:function(){
        return (navigator.userAgent.match(/micromessenger/i) && navigator.userAgent.match(/miniprogram/i)) || window.__wxjs_environment === 'miniprogram';
    }