微信小程序来了,你准备好了吗?

 

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

2.小程序的服务器域名必定要支持httpsvue

3.单个小程序最多不能超过2MB,小程序能够分包,最多分4个包,因此说小长须最大不超过8MBreact

4.目录结构web

app.js           js逻辑代码npm

app.json       配置文件编程

app.wxss      样式文件json

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.
相关文章
相关标签/搜索