微信小程序学习记录

尺寸单位 rpx

      常常以iphone6为开发基准,  1px = 2rpx,不同设备的比例是不同的;

 

小程序生命周期

     和vue的生命周期很相似,不过小程序的生命周期和页面、组件的生命周期又又一点不一样,注意区分

     App({})     Page({})   component({})

     https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

     注意点:

                1.组件的生命周期需要写在pageLifetimes对象

                     微信小程序学习记录

 

                 2.多个组件的公共部分可以使用Behavior来存放,类似于vue中的mixins

                     https://www.jianshu.com/p/28bf1e397107   用法地址

 

列表循环

            wx:for=‘{{arr}}‘  必须设置wx:key,        默认就有index和item,可以直接使用

            如果不想使用index和item,  也可以使用wx:for-index=" "   wx:for-item=" "来修改成新的index和item

 

wx:if和hidden的区分使用

           首先明白wx:if,每次的出现都是重新渲染

           hidden仅仅就是显示于隐藏,不会重新渲染

           要懂得取舍和区分

 

slot插槽

          用法和老的vue差不多,不过当是具名插槽时,需要在options中设置multipleSlots: true,不然不生效

          例:

                     微信小程序学习记录

 

外部样式类

               有时候,组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。

               例:

                      组件中接收和使用

                       微信小程序学习记录,使用就和class名一样

 

 

                     向组件传入,在这个页面中写ex-tag的样式,然后tag-class 传入

                      注意:小程序的传入的样式可能不覆盖之前组件的样式,加!important强制覆盖

                        微信小程序学习记录

 

wxs:微信中的js文件

                   为什么会有wxs?  只有在wxs中的代码才能在wxml文件中调用,js文件代码不能在wxml中调用,就比如说wxml调用函数方法,只能调用wxs中的函数

                 注意: wxs建议用es5,有些es6不支持!!

 

组件中的obsever:类似vue中的watch

                  微信小程序学习记录

 

微信用户授权

         微信授权大概有三种:

                    第一种是页面html元素中直接获取,缺点:JS文件中不能获取到数据,仅仅能在页面中显示

                         type=‘userAvatarUrl‘就是获取用户头像     type=‘userNickName‘就是用户名字

                    微信小程序学习记录

 

 

 

                   第二种是通过button元素来获取,也是目前获取微信用户授权的最佳方法,注意:禁止未授权时,点击会触发授权框,如果是授权的状态,再次点击就不会有弹窗的效果

 

                   wxml文件:open-type固定,bing:getuserinfo事件也固定

                             微信小程序学习记录

 

                  wxs文件:

 

                            微信小程序学习记录

              

 

                   第三种就是对第二种方法的补充wx.getUserInfo,注意:仅对使用过第二种方法,已授权的用户的信息进行获取,如果没有获取,wx.getUserInfo将失效                   

                    wx.getSetting({})检测是否已授权,检测了才能用wx.getUserInfo()
                     微信小程序学习记录

 

 

 

                      微信小程序学习记录

微信小程序学习记录

上一篇:程序员过年必备 -- 微信自动【抢】红包


下一篇:小程序获取上个页面vm对象 解决百度小程序返回上一页不更新onShow更新(适用于uni-app)