原生微信小程序基础学习笔记

小程序官方文档：微信开放文档

基础：

1、数据绑定渲染用{{}}、数据循环用wx:for、是否渲染用 wx-if 、wx:elseif、wx:else 是否显示用hidden属性

    wx:for:循环默认项为item,更改的话用wx-for-item ,index更改用wx-for-index 循环时添加wx:key作为唯一标识，为了高效的更新虚拟DOM

2、在方法中获取data中的数据用this.data.id，改变用this.setData({id:123})

3、doFn(e){}在事件对象e中可以获取自定义属性值

4、绑定动态属性用data-id=“{{id}}” ，获取的话用实践对象e.currentTarget.dataset.id,在视图层执行方法传值就用data-设置，用事件对象获取所传的值

5、点击事件:   冒泡事件bindtap,非冒泡事件catchtap

6、全局配置app.json，pages中谁是首页谁在第一位，在window属性中修改导航样式等，tabBar设置底部tab切换，最少2个最多5个，iconPath、selectdIconPath是图标，也可设置color、 selectdColor样式

7.下拉刷新显示加载状态

8.设置tabbar购物车右上角数量

9、跳转tabbar内的页面时用wx.switchTab

10、点击事件时 在标签上设置data属性，在事件对象下可以获取

data-index="{{index}}"

const index=e.currentTarget.dataset.index 

11.更改data时，用this.setData({})

12.引入样式文件@import "相对路径"

13、事件：bindtap事件冒泡 catchtap阻止事件冒泡

14、尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

登录 

需要账号密码登录时

15、数据传输

15-1:全局本地存储 ,在A页面wx.setStorage,在B页面wx.getStorage

15-2:<navigator url=“/pages/hello/hello?name=tom”></navigator>在hello页面获取options参数即可

15-3：<button bindtap="goHello" data-name="tom">跳转页面传输数据</button>在hello页面获取options参数即可

16、配置请求地址，在util文件夹下新建config.js

var config={

        api:"http://www.xxxx.com/api/"
}

module.exports= config;

在使用处引用

let config= require("../../util/config.js")

17、app.js为全局js,里面可写全局方法，存全局数据

在app.js中写一个方法Todo（）{},在别的页面js文件中

const app= getApp()获取应用

通过app.Todo()调用

18、当复选框只有一个时，可用switch组件代替，type="checkbox" 

19、样式导入：在wxss文件中 用@import ‘路径’来导入其他样式，路径可为相对和绝对

20、循环时可用block标签包裹，block不是组件，仅仅是包裹元素，不会再页面渲染

21、wxs模块：可以为过滤器对数据进行操作

22、文本超出显示省略号：

23、共享数据:app.js中的 globalData设置和获取

24、获取用户信息：

<open-data type="groupName" open-gid="xxxxxx"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

25、单页面下拉刷新时需要在该页面的json中配置：enablePullDownRefresh：true,才能开启

26、分享：

需要在当前页面生命周期函数中配置分享参数：

由<button open-type='share' >分享</button>触发

27、Scroll-view 横向滑动

父组件添加  white-space: nowrap;

28、动态设置顶部导航标题：

wx.setNavigationBarTitle({

      title: options.title//传值过来或者固定值

    })

29、设置tabbar图标：

wx.setTabBarBadge({
  index: 0,
  text: '1'
})

（重点） 组件化开发：

组件声明周期

 

 

 

 

 

  自定义组件：数据监听器

 

 

 

 自定义组件：纯数据字段

 

 

 组件所在页面生命周期：

 

 

 

 

自定义组件：插槽 

 

 

  

API:

 

其他笔记图片：