微信小程序-学习日记

小程序配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

我的思考: 这些配置项相当于调用已经写好的组件，免去了一些常规样式和功能的实现。

小程序构造页面

使用 Page 构造器注册页面，Page函数中的data可以完成和Vue同样响应式，并且它也有生命周期

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

小程序的页面栈

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

注：当页面栈超过一定数量会造成无法跳转，受到wx的限制

小程序组件

小程序实现了很多组件，它们的功能更加强大

view

代替原来的div标签

<view hover-class="h-class">
点我试试
</view>

属性	说明
hover-class	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果
hover-stop-propagation	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	按住后多久出现点击态，单位毫秒
hover-stay-time	手指松开后点击态保留时间，单位毫秒

text

文本标签
只能嵌套text
长按文本可以复制（只有该标签有这个功能）
可以对空格回车进行编码

属性名	类型	默认值	说明
user-select	Boolean	false	文本是否可选,该属性会使文本节点显示为 inline-block
space	String		显示连续空格
decode	Boolean	false	是否解码，不解码&nbsp就无法转换为空格

image

图片标签，image组件默认宽度为320px、高度为240px
支持懒加载
图片地址只能是外部地址，可以将本地的图片转为外部链接，点击创建链接

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	‘scaleToFill’	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode的合法值

scaleToFill 默认值不保持纵横比缩放图片，使用图片的宽高完全拉伸至填满image元素
aspectFit 保持宽高比，确保图片的长边显示出来，页面轮播图常用
aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来，少用
widthFix 以前web的图片，宽度指定之后，高度会自己按照比例来调整，常用
bottom 类似以前的background-position

swiper 轮播图组件

轮播图外层容器 swiper
每一个轮播项 swiper-item
swiper标签存在默认样式
1. width 100%
2. height 150px image存在默认宽度和高度 320*240
3. swiper 高度无法实现由内容撑开
先找到原图的宽度和高度等比例给swiper定宽度和高度

设原图的宽度和高度为 1125 * 352 px

swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

height: 100vm * 352 / 1125
autoplay 自动轮播
interval 修改轮播时间
circular 衔接轮播
indicator-dots 显示指示器分页器索引器，即轮播图下的小圆点
indicator-active-color 选中的时候的指示器的颜色

navigator 导航组件

导航组件，类似超链接标签

块级元素，默认会换行，可以直接加宽度和高度
target 要跳转到当前的小程序还是其他的小程序的页面

self——>当前小程序

miniProgram——>其他的小程序

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序的跳转链接
open-type	String	navigate	跳转方式

open-type有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
switchTab	跳转到tabBar页面，并关闭其他所有非tabbar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页或者多级页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

rich-text 富文本

富文本标签

可以将字符串解析成对应标签，类似vue中v-html

nodes属性来实现
1. 接收标签字符串
2. 接收对象数组

<rich-text nodes="{{a}}"></rich-text>

标签字符串

Page({
    data:{
        a:'<div><span>hello world</span></div>' //注意不要换行，否则会报错
    }
})

对象数组

Page({
    data:{
        a:[
            {
                // 1.name属性指定标签
                name:"div",
                // 2.标签上有哪些属性
                attrs:{
                    // 标签上的属性 class style
                    class:"my_div",
                    style:"color:red"
                },
                // 3.子级点 children 要接受的数据类型和nodes第二种渲染方式的数据类型一致
                children:[
                    {
                        name:"p",
                        attrs:{}, //没有就为不放
                        // 放文本
                        children:[
                            {
                                type:"text",
                                text:"hello"
                            }
                        ]
                    }
                ]
            }
        ]
    }
})

button

外观属性

size控制按钮的大小
1. default 默认大小
2. mini 小尺寸
type控制按钮的颜色
1. default 按钮为灰色
2. primary 按钮为绿色
3. warn 字体为红色
plain按钮是否镂空，背景色透明
loading名称前是否带loading图标

开放能力

open-type的合法值

值	说明
contact	打开客服会话，如果客户在会话中点击信息卡片后返回小程序，可以从bindcontact回调中获得具体信息，只能打开真机调试
share	触发用户转发，不能将小程序分享到朋友圈中
getPthoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，不是企业的小程序，没有权限获取
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取用户信息
launchApp	打开APP，可以通过app-parameter属性设定项APP传的参数
openSetting	打开授权设置页
feedback	打开”意见反馈“页面，用户可提交反馈内容并上传日志。开发者可以登录小程序管理后台进入左侧菜单”客服反馈“页面获取反馈内容

contact

将小程序的appid由测试号改为自己的appid
登录微信小程序官方，添加客服-微信

getPthoneNumber

绑定一个事件 bindgetPhonenumber
在事件的回调函数中通过参数来获取信息
获取到的信息已经加密过

需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码再返回小程序中，就可以看到信息了

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>

Page({
	getPhoneNumber(e){
        consoloe.log(e);
    }
})

getUserInfo

该属性和getPhoneNumber属性的使用方法相同
可以直接获取，不需要加密的手段

launchApp

需要先在app中通过app的某个链接打开小程序
在小程序中通过这个功能重新打开app

openSetting

授权页面中只会出现用户曾点击过的权限

feedback

这能够通过真机调试

icon 小图标

属性	类型	必填	说明
type	string	是	icon的类型，有效success, success_no_circle, info, warn, waiting, cancel, download,search,clear
size	number/string	否	icon的大小
color	string	否	icon的颜色，同css的color

radio 单选框

radio标签必须要和父元素radio-group来使用
value 选中的单选框的值
需要给radio-group 绑定change事件

<radio-group bindchange="handleChange">
	<radio>男</radio>
    <radio>女</radio>
</radio-group>

checkbox 复选框

<checkbox-group>
    <checkbox wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>

list:[{
    id:0,
    name:"apple"
},{
    id:0,
    name:"banana"
}]

微信小程序.001