微信小程序2.0

今天我们来学习微信小程序的更多内容。

  • wxss(微信样式表)

1.微信的样式和css普通页面几乎也一样
2.微信里面的750rpx等于当前屏幕的宽
3.app.wxss样式是全局的
4.页面.wxss是只对当前页面有效

  • 网络请求

wx.request

  • 下拉刷新

1.onPullDownRefresh() // 业务逻辑刷新
2.wx.stopPullDownRefresh() // 停止下拉刷新
配置
1."backgroundColor":"#f30" // 下拉刷新背景颜色
2."backgroundTextStyle":"light" // 下拉刷新加载提示颜色 light/dark
3."enablePullDownRefresh":true // 允许下拉刷新

  • 加载提示

1.wx.showLoading
2.wx.showToast
1).title 标题
2).icon 图标
3).duration 持续时间

  • 数组方法

a.concat(b) 把a数组和b数组合并

  • 本地存储

1.getStorage
1).key
2).success 成功
3).fail 失败
2.setStorage
1).key
2).value 不需要转字符串

  • 页面间跳转

1.标签跳转 navigator

1.url跳转的地址 url="/pages/index/index"
2.open-type 跳转的类型 
1).redirect 重定向(跳转过后页面没有返回箭头)不会留下历史记录(跳转过后不能通过返回到这个页面)
2).navigateBack 返回

2.代码跳转

// navigateTo
wx.navigateTo({
url:'/pages/index/index',
})
// redirectTo
wx.redirectTo({
url:'/pages/index/index',
})

3.tabs 底部栏

1.app.json 配置tabBar
2.navigator open-type="switchTab"
3.wx.switchTab({
   url:'/pages/index/index',
   })

4.页面传参

url="/pages/news/news?id=abc&age=18"
  • 小程序的生命周期

1.onLoad 页面加载 ---获取页面的参数 options
2.onReady 页面渲染
3.onShow 页面显示
4.onHide 页面隐藏
5.onUnload 页面卸载 ---当重定向 redirect 该页面会被卸载

6.层级关系

A-B-C-D-E
当到达E页面时候ABCD都会被缓存起来 最多缓存5个页面
单击返回就会回到上一层页面

7.在缓存时,最多缓存5个,当用redirect 该页面不会被缓存
1).wx.navigateTo会增加页面栈大小,直到页面栈大小为5
2).wx.redirectTo不会增加页面栈大小
3).wx.navigateBack会增加页面栈大小,直到页面栈大小为1

  • scroll-view 可滚动视图区域
scroll-x 允许横向滚动
scroll-left 设置横向滚动条位置 scroll-left="{{scrollLeft}}"
scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
  • swiper 滑块视图容器
autoplay 是否自动切换  autoplay="{{true}}"
indicator-dots 是否显示面板指示点  indicator-dots="{{true}}"
indicator-active-color 当前选中的指示点颜色  indicator-active-color="#f30"
interval 自动切换时间间隔
duration 滑动动画时长
  • 地理位置

我们需要访问百度地图API,在控制台界面,创建应用,获取AK(访问应用),复制秘钥粘贴到项目中。具体操作步骤可以参考微信小程序JavaScript API文档,大家不妨试一试,真的很方便!

热词搜索

天气查询

好了,今天的分享就到这里了!
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。

你可能感兴趣的:(微信小程序2.0)