zoukankan      html  css  js  c++  java
  • 微信小程序来了,你准备好了吗?

    1.小程序是基于webView的开发

    2.小程序的服务器域名一定要支持https

    3.单个小程序最多不能超过2MB,小程序可以分包,最多分4个包,所以说小长须最大不超过8MB

    4.目录结构

    app.js           js逻辑代码

    app.json       配置文件

    app.wxss      样式文件

    app.wxml      结构文件

    5.onLaunch   生命周期钩子

    6.window用来配置全局的特性

    7.navigationBarTextStyle    文本颜色    只有黑色和白色

    8.安卓手机设置中的开发者选项,显示布局边界,可以查看应用是原生的还是webView

    9."enablePullDownRefresh":true    开启下拉刷新

    10.borderStyle    tabbar上边框的颜色, 仅支持 black / white

    position     tabBar的位置,仅支持 bottom / top

    其中 list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象

    iconPath    图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。

    当 postion 为 top 时,不显示 icon。

    selectedIconPath   选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。
    当 postion 为 top 时,不显示 icon。

    11."debug":true    显示生命周期调用日志

    12.注册程序

    onLaunch         生命周期回调—监听小程序初始化    小程序初始化完成时(全局只触发一次)

    onShow            生命周期回调—监听小程序显示       小程序启动,或从后台进入前台显示时
    onHide             生命周期回调—监听小程序隐藏        小程序从前台进入后台时

    App中既可以定义方法,又可以定义属性

    13.小插曲

    vue实例中不可以随便定义函数,在methods里面可以

    react中可以随便定义

    14.注册页面

    onLoad                       生命周期回调—监听页面加载

    onReady                     生命周期回调—监听页面初次渲染完成

    onPullDownRefresh    监听用户下拉动作

    onReachBottom          页面上拉触底事件的处理函数

    onShareAppMessage  用户点击右上角转发

    onPageScroll              页面滚动触发事件的处理函数

    onTabItemTap(Object)       点击 tab 时触发

    15.点击事件   bindtap

        修改值       this.setData

    16.路由(分两大类,编程式导航和路由组件)

    • navigateToredirectTo 只能打开非 tabBar 页面。
    • switchTab 只能打开 tabBar 页面。

    有tabBar时

    wx.switchTab({
        url: '/pages/index/index',
    })
    无tabBar时
    wx.navigateTo({
       url: '/pages/index/index',
    }) 
    此方法会在路由栈中保存一条记录
    wx.redirectTo({
       url: '/pages/index/index',
    })
    此方法不会在路由栈中保存一条记录
    返回操作
    back () {
       wx.navigateBack({
     
      })
    }
    relaunch   重新加载
    <navigator open-type='navigateTo' url='/pages/index/index'>
       <button bindtap="handleBtnTap">
          click
       </button>
    </navigator>
    路由传参&&接受参数
     
     
     
     
     
     
    17.模块化
    方式一:
    定义并暴露模块    module.exports = 'hello'
    引用模块              const m1 = require('../cookbook/views/m1.js')
    Page({
       onReady() {
          console.log(m1)
       }
    })
    方式二:
    定义并暴露模块     export default 'hello world'
    引用模块               import m1 from '../cookbook/views/m1.js'
    Page({
       onReady() {
          console.log(m1)
       }
    })
    18.增加了npm的支持
    loadsh   underscore
    19.API(API文档)
    20.视图层(wxml+wxss)
    循环
     
     
    方式一
     
     
     
     
     
    方式二
     
    wx:if的使用
     
     
     
    hidden的使用
     
     
     
    21.模板(template)
    模板template必须有一个name属性
     
     
     
     
     
    22.
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    移动端触摸右侧菜单栏,页面内容对应项滚动到最上方
    swiper使用中一些点的总结
    javaScript正则表达式入门
    javaScript之数组操作方法(一)
    初识vue
    焦点控制切换和轮播
    文本内容只显示两行,然后加...
    图片父容器高度不定的图片垂直居中
    css3图片垂直居中
    【C#】两个list根据某个元素比较差集
  • 原文地址:https://www.cnblogs.com/jsjx-xtfh/p/10117128.html
Copyright © 2011-2022 走看看