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

小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

基础:

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

原生微信小程序基础学习笔记_第1张图片

原生微信小程序基础学习笔记_第2张图片

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

原生微信小程序基础学习笔记_第3张图片

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

原生微信小程序基础学习笔记_第4张图片

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

原生微信小程序基础学习笔记_第5张图片

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物理像素

登录 

原生微信小程序基础学习笔记_第6张图片

原生微信小程序基础学习笔记_第7张图片

需要账号密码登录时

原生微信小程序基础学习笔记_第8张图片

原生微信小程序基础学习笔记_第9张图片

原生微信小程序基础学习笔记_第10张图片

原生微信小程序基础学习笔记_第11张图片

原生微信小程序基础学习笔记_第12张图片

原生微信小程序基础学习笔记_第13张图片

原生微信小程序基础学习笔记_第14张图片

15、数据传输

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

15-2:在hello页面获取options参数即可

15-3:在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模块:可以为过滤器对数据进行操作

原生微信小程序基础学习笔记_第15张图片

原生微信小程序基础学习笔记_第16张图片

原生微信小程序基础学习笔记_第17张图片

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

原生微信小程序基础学习笔记_第18张图片

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

原生微信小程序基础学习笔记_第19张图片

原生微信小程序基础学习笔记_第20张图片

24、获取用户信息:

原生微信小程序基础学习笔记_第21张图片

原生微信小程序基础学习笔记_第22张图片

原生微信小程序基础学习笔记_第23张图片



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

26、分享:

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

原生微信小程序基础学习笔记_第24张图片

触发

27、Scroll-view 横向滑动

父组件添加  white-space: nowrap;

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

wx.setNavigationBarTitle({

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

    })

29、设置tabbar图标:

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

(重点) 组件化开发:

原生微信小程序基础学习笔记_第25张图片

原生微信小程序基础学习笔记_第26张图片

原生微信小程序基础学习笔记_第27张图片 原生微信小程序基础学习笔记_第28张图片

原生微信小程序基础学习笔记_第29张图片

原生微信小程序基础学习笔记_第30张图片

原生微信小程序基础学习笔记_第31张图片

原生微信小程序基础学习笔记_第32张图片

原生微信小程序基础学习笔记_第33张图片

原生微信小程序基础学习笔记_第34张图片

原生微信小程序基础学习笔记_第35张图片 原生微信小程序基础学习笔记_第36张图片

原生微信小程序基础学习笔记_第37张图片

原生微信小程序基础学习笔记_第38张图片

原生微信小程序基础学习笔记_第39张图片

原生微信小程序基础学习笔记_第40张图片

API:

原生微信小程序基础学习笔记_第41张图片

原生微信小程序基础学习笔记_第42张图片

原生微信小程序基础学习笔记_第43张图片

原生微信小程序基础学习笔记_第44张图片 原生微信小程序基础学习笔记_第45张图片原生微信小程序基础学习笔记_第46张图片

原生微信小程序基础学习笔记_第47张图片

原生微信小程序基础学习笔记_第48张图片

原生微信小程序基础学习笔记_第49张图片

原生微信小程序基础学习笔记_第50张图片

原生微信小程序基础学习笔记_第51张图片

原生微信小程序基础学习笔记_第52张图片

原生微信小程序基础学习笔记_第53张图片

原生微信小程序基础学习笔记_第54张图片

其他笔记图片:

原生微信小程序基础学习笔记_第55张图片

原生微信小程序基础学习笔记_第56张图片

原生微信小程序基础学习笔记_第57张图片

原生微信小程序基础学习笔记_第58张图片

原生微信小程序基础学习笔记_第59张图片

原生微信小程序基础学习笔记_第60张图片

原生微信小程序基础学习笔记_第61张图片

 

原生微信小程序基础学习笔记_第62张图片

原生微信小程序基础学习笔记_第63张图片

 

 

你可能感兴趣的:(原生微信小程序基础学习笔记)