微信小程序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文档，大家不妨试一试，真的很方便！

热词搜索

天气查询

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