您的位置: 首页  >  IT文章  >  微信小程序总结

微信小程序总结

分类: IT文章 • 2023-10-26 19:43:11

一.基础用法：

<navigator url='跳转页面组件'></navigator>用法和a标签差不多

<text></text>文本标签
<view></view>相当于html的div标签
bindtap='change '绑定点击事件的使用方式
catchtab阻止事件
数据都是由index.js控制和vue框架管理数据差不多
 
app.js:
globalData：（放置全局对象和方法）放置全局数据
 
 
index.js：
onReady:function(){
getApp（）获取app.js下的globalData中的数据
 
}
 
js运行时是从app.js开始的，实例化我们的程序，小程序生命周期的启动，config.js里装的是属性：
/**
 * 小程序配置文件
 */

// 此处主机域名是腾讯云解决方案分配的域名
// 小程序后台服务解决方案：https://www.qcloud.com/solution/la

var host = "14592619.qcloud.la"

var config = {

    // 下面的地址配合云端 Server 工作
    host,

    // 登录地址，用于建立会话
    loginUrl: `https://${host}/login`,

    // 测试的请求地址，用于测试会话
    requestUrl: `https://${host}/testRequest`,

    // 用code换取openId
    openIdUrl: `https://${host}/openid`,

    // 测试的信道服务接口
    tunnelUrl: `https://${host}/tunnel`,

    // 生成支付订单的接口
    paymentUrl: `https://${host}/payment`,

    // 发送模板消息接口
    templateMessageUrl: `https://${host}/templateMessage`,

    // 上传文件接口
    uploadFileUrl: `https://${host}/upload`,

    // 下载示例图片接口
    downloadExampleUrl: `https://${host}/static/weapp.jpg`
};

module.exports = config
View Code

二.基础配置

全局配置：

1.1配置所有页面路径：在app.json的{pages：[配置所有页面]}，将首页放置在第一位，在app.json必须写上所有页面的路径，要不然会报错，每个页面的wxss样式文件只在当前文件里有效
1.2设置tabBar导航：
"tabBar": {
"color": "#7A7E83",//字体颜色
"selectedColor": "#3cc51f",//选中时候字体的颜色
"borderStyle": "black",//tabbar边框的颜色，只有黑和白
"backgroundColor": "#fff",//背景颜色
"list": [//2-5，只能设置2-5个导航
{
"pagePath": "page/newPage/index",//导航页面路径，根据路径匹配tarbar导航是否显示
"iconPath": "image/icon_component.png",//图标图片的路径
"selectedIconPath": "image/icon_component_HL.png",//选中的时候图片的路径
"text": "首页"//按钮文本
},
{
"pagePath": "page/component/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "组件"
}
]
}
View Code
2.window：窗口样式的配置
 3.注册程序：app.js
设置相对应的生命周期函数（初始化完成时onLaunch,显示onShow，隐藏onHide，错误的时候onerror）
设置全局数据：globalData属性进行设置，getApp（）可获取app.js的配置对象
 
4.1.导入文件方式：<import src='文件路径'/>
<import src="a.wxml"/>
<写要导入的具体内容标签>
4.2.将整个文件内容导入并显示方式：<include  src='文件路径'/>
include将页面header.wxml的内容全部导入，相当于将所有内容都复制过来
<include src="header.wxml"/>
const openIdUrl = require('./config').openIdUrl
//小程序应用的生命周期启示
//一般还会将全局的数据放置到初始化全局对象的globalData这个对像上
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  //小程序显示的时候（启动/后台切换到前台的时候启动）
  onShow: function () {
    console.log('App Show')
  },
  //切换至后台，切换到其他微信页面，切换到其他程序，就会调用起这个函数
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: true,
    openid: null
  },
  // lazy loading openid
  getUserOpenId: function(callback) {
    var self = this

    if (self.globalData.openid) {
      callback(null, self.globalData.openid)
    } else {
      wx.login({
        success: function(data) {
          wx.request({
            url: openIdUrl,
            data: {
              code: data.code
            },
            success: function(res) {
              console.log('拉取openid成功', res)
              self.globalData.openid = res.data.openid
              callback(null, self.globalData.openid)
            },
            fail: function(res) {
              console.log('拉取用户openid失败，将无法正常使用开放接口等服务', res)
              callback(res)
            }
          })
        },
        fail: function(err) {
          console.log('wx.login 接口调用失败，将无法正常使用开放接口等服务', err)
          callback(err)
        }
      })
    }
  }
})
View Code
5.index.js:存储数据和方法（index.wxml视图页面元素相当于html）index.json表示当前页面的配置
Page({//表示当前文件下的page全局的page对象，所有的方法和数据

  /**
   * 页面的初始数据
   */
  data: {
    msg:'这是data里的数据',
    helloMsg: 'helloWorld',
    obj:{
      helloMsg:'欢迎词',
      otherText:'其他信息'
    },
 
  },
  changeMsg:function(){
    this.setData({
      msg:'这是改变后的内容',
 
    })
  },
  clicktap:function(e){
    console.log(e)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var appConfig =  getApp()//getApp（）是获取全局变量globalData方法下的数据的函数方法
    console.log(appConfig)
    if(appConfig.globalData.hasLogin){
      this.setData({
        msg:'已登陆完成'
      })
    }else{
      this.setData({
        msg:'还未登陆，请登录'
      })
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var  pageList = getCurrentPages()
    console.log(pageList)
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  goPage(){
    // wx.navigateTo({
    //   url: '/page/component/pages/button/button',
    // })
    wx.redirectTo({
      url: '/page/component/pages/button/button',
    })
  }
})
View Code

三、路由跳转及文件导入导出：

1.组件：<navigation open-type='navigatorTo' url='页面地址'>

2.jsAPI接口：wx.navigator({ url:'' })
 
3.全局函数都是在app.js中创建
 
4.导出：exports=module.exports
var config = {
module.exports = config
导入：require（目前只支持相对路径）
const openIdUrl = require('./config').openIdUrl
 
4.1.引入文件方式：<import src='文件路径'/>
<import src="a.wxml"/>
<写要引入的具体内容标签>
4.2.将整个文件内容导入并显示方式：<include  src='文件路径'/>
include将页面header.wxml的内容全部导入，相当于将所有内容都复制过来
<include src="header.wxml"/>
 
5.路由：
5.1，页面的跳转
<navigator open-type='navigateTo'>打开新页面</navigator>//打开新的页面，如果有多个页面的话会有一个返回按钮
<navigator open-type='redirectTo' url='/page/component/pages/button/button'>重定向的页面</navigator>//跳转页面是不会有返回按钮
<navigator open-type='switchTab' url='/page/component/index' >tab组件的页面</navigator>//针对导航按钮的，所以url的路径必须是一个导航按钮路径要不然将不会进行跳转
5.2，点击事件：
<button type='warning' bindtap='goPage'>跳转至按钮页面</button>
5.3，js里设置方法：
goPage(){
// wx.navigateTo({
// url: '/page/component/pages/button/button',
// })
wx.redirectTo({
url: '/page/component/pages/button/button',
})
}
5.4，元素标签里直接写路径：navigator相当于a标签：
<navigator url='/page/component/pages/button/button'>跳转至按钮页面</navigator>
四、视图渲染

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})
 

block wx:if

block和template差不多，不会再控制台可见标签

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/>标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

列表渲染

<!--wxml-->
1//<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>//自定义数组循环 

<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    zero：6，
    array: [1, 2, 3, 4, 5]
  }
})
2//此处的wx:for-item='newItem'可以不用相当于把item赋给newItem，
不写时下面的newItem.title换成item.title。此处的wx:for-index='id'其实就是每一个item的索引
<view wx:for="{{newList}}" wx:for-item='newItem' wx:for-index='id' wx:key='{{id}}'>
<view>{{id+1}}.{{newItem.title}}</view>
<view>{{newItem.content}}</view>
</view>

数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
 
对象解构：

模板：

此处的template是虚拟的标签，在控制台的标签元素是看不到的，所以向该标签
内写内容是无法显示的只能通过如下方法用is调用
1.1<!--wxml--><template name="staffName"><view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view></template>

//表示控制以上name=staffName下的view的视图，其中data调用对象时用三个点表示

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})
 

1.2//is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
	<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
 
2. <templateis="objectCombine"data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})

最终组合成的对象是 {for: 1, bar: 2}

3. 如果对象的 key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}

 最后上几张总结性的图：
微信小程序总结
 
微信小程序总结
 
微信小程序总结
 
 

相关推荐