小程序项目学习笔记

最新推荐文章于 2022-10-06 09:01:56 发布

weixin_45121510

最新推荐文章于 2022-10-06 09:01:56 发布

阅读量379

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_45121510/article/details/109453015

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于__wxConfig
console.log(__wxConfig,'__wxConfig')

比如：可以通过这个变量判断不同版本等信息let version = __wxConfig.envVersion;

在这里插入图片描述
2. wx.getNetworkType(获取网络类型)

 wx.getNetworkType({
   success: (result) => {
     if (result.networkType == 'none') {
       wx.showToast({
         title: '似乎已断开与互联网的连接~',
         icon: 'none',
         duration: 2000
       })
     }
     reject({ error: '网络错误', code: 0 });
   }
 })

app() 和 getApp()的关系
(1) App() 注册小程序。
接受一个 Object 参数，其指定小程序的生命周期回调等。

(2) getApp() 获取到小程序全局唯一的 App 实例

在这里插入图片描述

var appInstance = getApp()
console.log(appInstance .globalData.location) 这里的globalData对象的值是app()里面注册的

一些常用的微信API

界面交互
(1) showLoading()和wx.hideLoading()
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框。

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

(2)
**wx.showToast(Object object)**显示消息提示框

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

**wx.hideToast(Object object)**隐藏消息提示框

(3)**wx.showModal(Object object)**显示模态对话框

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

数据缓存
(4) wx.setStorage(Object object)
将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。
wx.setStorageSync(string key, any data) --wx.setStorage 的同步版本

   wx.setStorageSync('xwh_userInfo', {
     nickName: e.detail.userInfo.nickName,
     avatarUrl: e.detail.userInfo.avatarUrl
   })

路由
(5)wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

wx.navigateTo({
  url: 'test?id=1&value=222',  //路由&参数
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//test.js
Page({
//option
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

(6)
(7)
(8)
(9)
(10)
(11)
(12)
(13)

scroll-view视图容器（可滚动视图区域）
使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
属性：
scroll-y：Boolean 是否允许纵向滚动（布尔值）
bindscrolltolower：eventhandle 滚动到底部/右边时触发（与翻页事件配合使用）
自定义组件Component
Component 构造器
 组件间通信与事件
在自定义组件中：

触发事件 相当于$emit
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

在引用自定义组件的父组件中：

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 或者可以写成 -->
<component-tag-name bind:myevent="onMyEvent" />

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。（插件的自定义组件将返回 null）

调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

// 父组件
Page({
  data: {},
  getChildComponent: function () {
    const child = this.selectComponent('.my-component');
    console.log(child)
  }
})

在上例中，父组件将会获取 class 为 my-component 的子组件实例对象，即子组件的 this 。

getCurrentPages() (用于获取当前页面栈的实例)
以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

//想要获取当前页面相关信息：
let pages = getCurrentPages(); //当前页面栈
法(1)
//当前页面为页面栈的最后一个元素
let prevPage = pages[pages.length - 1];//当前页面
法(2)
// pop() 方法用于删除并返回数组的最后一个元素
let prevPage = pages.pop();//当前页面

全局配置 app.json文件
（1）tabBar （底部 tab 栏的表现）
（如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。）
设置属性custom：true可自定义tabBar
（2）permission 小程序接口权限相关设置

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

在这里插入图片描述
（3）usingComponents 全局自定义组件配置
（在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明）
（4）window 用于设置小程序的状态栏、导航条、标题、窗口背景色
（5）subpackages 分包结构配置

  "subPackages": [
    {
      "root": "pages/packageInfo",
      "pages": [
        "pages/info-commit/index",
        "pages/id-card/index"
      ]
    },
  ]

button的open-type属性（微信开放能力）

getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息

 <view class="author_btn">
   <button class="button" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">微信授权用户信息</button>
 </view>

  bindGetUserInfo(e) {
    if (e.detail.errMsg === "getUserInfo:ok") {
      wx.setStorageSync('xwh_userInfo', {
        nickName: e.detail.userInfo.nickName,
        avatarUrl: e.detail.userInfo.avatarUrl
      })
      wx.navigateTo({
        url: '/pages/packageLogin/pages/logs/logs',
      })
    } else {
      wx.showToast({
        title: '你已拒绝授权登录',
        icon: 'none',
        duration: 2000
      })
    }
  },

getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息

注意：
在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

log.wxml
    <button class="wx-log-btn btn"    
    open-type="getPhoneNumber"
    bindgetphonenumber="bindGetPhoneNumber"  
    >

log.js
//提前进行login
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    wx.login({
      success: (res) => {
      //存一些需要的值
        }
      },
    });
  },


  bindGetPhoneNumber(e) {
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        let params = {
        ……
          sessionKey: this.data.sessionKey,
        };
		wx.$http.xxx ……（调用接口
      } else {
        wx.showToast({
          title: "您已拒绝授权登录",
          icon: "none",
          duration: 2000,
        });
      }
    }
  },

wx:if 和 hidden

//列表有数据的时候
<view class="content" wx:if="{{hotList.length > 0}}" hidden="{{showEle}}">
	……
</view>
//列表无数据的时候
<view class="nodata" wx:else hidden="{{showEle}}">
    <no-data title="暂无消息~" />
</view>

//初始化
page({
	data:{
		showEle: true, //是否隐藏元素
		hotList:[]
	}
	//…… 在onshow或者方法调用的时候，
	this.setData({
		showEle:false,
		hotList:[ …… xxxx数据]
	})
})

有时在列表页，只写wx:if的时候，会自然先加载无消息，再加载有消息。这是可以用hidden,一开始把两个把两种都隐藏，再根据if的情况进行展示（hidden有点像display:none）

条件渲染:
wx:if="" 判断是否需要渲染该代码块；

<view wx:if="{{length > 5}}" ></view>
<view wx:elif="{{length = 3}"></view>
<view wx:else>3</view>

基础组件：如：
所有组件都有以下公共属性：
id; class; style;
hidden:组件是否显示所有组件默认显示;
data-: 自定义属性组件上触发的事件时，会发送给事件处理函数;
bind/ catch* : 组件的事件

事件
一/事件使用
1.在组件中绑定一个事件处理函数

//组件上的data，id都会传递到bindtap绑定的事件上去
<view id="tapTest" data-hi="Weixin" bindtap="tapName">Click Me!</view>

2.在相应的Page定义中写上相应的事件处理函数，参数是event:

Page({
	tapName:function(event) {
		console.log(event)
	}
})

3.可以看到log出来的信息大致如下：

//最常使用currentTarget来获取
{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

二/事件详解
1.事件分类：
冒泡事件和非冒泡事件
2.事件绑定：
bind* / catch*
如：bindtap
catchtap
3.绑定并阻止事件冒泡：
与bind不同，catch会阻止事件向上冒泡。
4.事件对象：
如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。（event）
在这里插入图片描述

mark

wx:for

weixin_45121510

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序项目学习笔记

关于__wxConfigconsole.log(__wxConfig,'__wxConfig')比如：可以通过这个变量判断不同版本等信息let version = __wxConfig.envVersion;2. wx.getNetworkType(获取网络类型) wx.getNetworkType({ success: (result) => { if (result.networkType == 'none') { wx.showToast({ .
复制链接

扫一扫

专栏目录