微信小程序基本知识

1.网页后台管理功能

    开发需要基本的权限以及APPID

    需要微信支付,客服、插件等功能需要在后台对应开通

    上传包限制2M ---》所以图片多的尽量不要直接放本地

    域名:

      更改次数限制,域名必须是https的

      第三方插件用的时候,必须放入第三方插件对应的合法域名

    小程序基本的名称等配置也在后台

2.wxml对应html标签

    view===>div  文字:text     闭合标签:image input 等必须闭合标签类似于react

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

    wxss : rpx像素单位---------布局基本弹性盒布局

3.目录结构

    project.config.json:项目配置文件。

    app.wxss: 全局样式配置,通用。

    app.js: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

    app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

4.使用 Page 构造器注册页面

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: ‘Set some data for updating view.‘
    }, function() {
      // this is setData callback
    })
  },
  // *数据
  customData: {
    hi: ‘MINA‘
  }
})

5.跳转页面:

    wx.navigateTowx.redirectTo 只能打开非 tabBar 页面。

    wx.switchTab 只能打开 tabBar 页面。

    wx.reLaunch 可以打开任意页面。

    页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

    调用页面路由带的参数可以在目标页面的onLoad中获取。

     wx.navigateBack:关闭当前页面,返回上一页面或多级页面。

6.循环和显示隐藏

    wx:for="{{arr}}"----> 必须同步wx:key="{{index}}" ---->默认item和index ----多级循环重新定义item和index  wx:for-item="item1"----wx:for-index="idx"

    当 wx:for 的值为字符串时,会将字符串解析成字符串数组---------》花括号和引号之间如果有空格,将最终被解析成为字符串

    wx:if=""和wx:else  显示隐藏

    hidden="true" 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

7.事件

    除 bind 外,也可以用 catch 来绑定事件。与 bind 不同, catch 会阻止事件向上冒泡。

    wx不支持alert()

    修改值:this.setData({})

8.template以及import和include

    import 的作用域

      import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

      如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>
<!-- B.wxml --> <import src="a.wxml"/> <template name="B"> <text> B template </text> </template>
<!-- C.wxml --> <import src="b.wxml"/> <template is="A"/> <!-- Error! Can not use tempalte when not import A. --> <template is="B"/>

    include

    include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,如: 

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml --> <view> header </view>
<!-- footer.wxml --> <view> footer </view>

9.页面调转传值

   在跳转页面onload周期中默认参数option中接收传递参数

wx.reLaunch({
  url: ‘test?id=1‘
})
// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

10.app.js中的生命周期

    onLaunch 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

    onShow 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow

    onHide 生命周期函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide

    onError 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息   

微信小程序基本知识

上一篇:【微信小程序】 线上环境搭建


下一篇:常用eclipse插件