关于微信小程序开发记录

关于微信小程序开发记录

一、WXML语法

在 wxml中可以使用{{变量名}} （也叫 Mustache 语法）来进行绑定获取js中 Data 中定义得变量值

再双大括号中可以写三目运算 、判断等等 需要注意的是 一些特殊关键字也是需要{{}} 来进行使用的如ture false

<!-- view 标签类似于html 5 中得div-->
<view></view> 
<!-- 文字标签-->
<text></text>
<!-- block并不是⼀个组件，它仅仅是⼀个包装元素，不会在页⾯中做任何渲染，只接受控制属性 -->
<block></block>
<!-- 图片标签-->
<image src="XXXX"></image>
<!--例如：
	我们要循环一个列表展示，就可以使用block wx:for 来实现
	<block wx:for="{{[1, 2, 3]}}">
 		 <view> {{index}}:{{item}} </view>
	</block>
    如果要像html那样将可以复用得模块抽出来，可以使用template标签
	 1.创建一个用于存放复用模块的.wxml文件
	 2.使用 <template/>  来定义 ，name 属性标识模块名
-->
<template name="common">
	<view>Header</view>
</template>
<!-- 引用common模块 这里展示的是其中一种方式这里要使用到两个标签，
	 import是引入template.wxml
	 template 中is属性表示 引用的具体模块，也就是上边template中name的值
	 
	 补充还可以用include 标签进行引入需要注意的是include是将整个wxml都引入了进来，
	 这里就不写了详细可以查看微信官方文档
-->
<import src="../template/template.wxml"/>
<template is="common"/>
<!-- 这里再说一种进阶引用的方法
	 也就是可以将值传入复用模块，话不多说上代码
-->
<template name="common">
	<view>{{text}}</view>
</template>
<!-- 那么我引入的的时候就要再template标签中 给data 属性赋上你需要传入的值
-->
<import src="../template/template.wxml"/>
<template is="common" data="{{text: 'header'}}"/>

二、js文件

在微信小程序中js文件在Page（{}）中定义方法 ，变量如下结构

Page({
  /**
   * 页面的初始数据 ，
   *  在定义变量
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作（需要在json中开启下拉才行）
   */
  onPullDownRefresh() {

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

关于js其实都不陌生，所以这里记录几个重点api 的使用和一些注意点

/**
 *  微信官方内内置了很多方便我们开发的api 
 *	详细api文档 https://developers.weixin.qq.com/miniprogram/dev/api/
 * 	这里列几个常用的
 *	1.wx.getSystemInfo(Object object) 获取系统信息 可以获取到设备的品牌、设备型号等等（需要获取更多信息内容点击上方连接	*	进官方文档查看）
 */
wx.getSystemInfo({
  success (res) {
    console.log(res.model)  		// 设备型号。新机型刚推出一段时间会显示unknown，微信会尽快进行适配
    console.log(res.pixelRatio)		// 设备像素比
    console.log(res.windowWidth)    // 可使用窗口宽度，单位px
    console.log(res.windowHeight)   // 可使用窗口高度，单位px
    console.log(res.language) 		// 微信设置的语言
    console.log(res.version)  		// 微信版本号
    console.log(res.platform) 		// 客户端平台
  }
})
/**
 * 2.wx.getUserProfile(Object object)  获取用户信息，至于为什么不用wx.getUserInfo(Object object) 因为官方问档上提
 * 到 2021-4 之后该函数不再提示弹窗了
 * UserInfo  包含的属性
 *  nikeName  微信网名  
 *  avatarUrl 头像地址
 *  country   用户所在国家。不再返回，参考https://developers.weixin.qq.com/community/develop/doc/00028edbe3c58081e7cc834705b801
 *  province  用户所在省份。不再返回
 *  city      用户所在城市。不再返回
 *  language  显示 country，province，city 所用的语言。强制返回 “zh_CN”
 */
 wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
      })
    }
 })
/**
 * 跳转页面（路由）
   wx.switchTab(Object object)   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
   wx.reLaunch(Object object)    关闭所有页面，打开到应用内的某个页面
   wx.redirectTo(Object object)  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
   wx.navigateTo(Object object)  保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 		      wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
   wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
 */
wx.switchTab({
  url: '/index'
})
wx.reLaunch({
  url: 'test'
})
wx.redirectTo({
  url: 'test'
})
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
wx.navigateBack({
  delta: 2
})
// 各种路由方式，各有千秋，开发者根据自己实际开发进行选择

三、app.js 、app.json

最后说下 这两个影响全局的文件

这个两个文件是在项目的根目录

先说说app.js 每个页面默认有一个js文件只生效于当前页面，但是通过app.js 可以定义全局变量、函数

需要注意的是App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果

定义全局变量

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
      testData: "test"
  }
})

使用的时候通过

// other.js
var appInstance = getApp()
console.log(appInstance.globalData.test) // test

在说说app.json

这个是我们修改相对来说比较频繁的文件

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

详细请参考 小程序全局配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

-------------------------------------------------------------------------结束语--------------------------------------------------------------------------------------------------------

本文并不是很详细，之后可能会更新，感谢你的阅读，有问题请评论
侵权请联系 hzx996@126.com

感谢支持！！！