微信小程序

86 阅读 0 评论 57 点赞

我是靠谱客的博主认真大炮，最近开发中收集的这篇文章主要介绍微信小程序，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

微信小程序的优势和劣势
优势
微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。
不足
单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M（这个值一直在变化，以官网为准）。
需要像app一样审核上架，这点相对于H5的发布要麻烦一些。
处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。
view标签是我们开发过程中最常用的标签了，这个就相当于Html中的div。
text标签也是我们开发中常用的，这个相当于Html中的span
image标签相当于我们Html中的img。

tabBar切换在app.json里
"tabBar": {
"color": "#000",
"selectedColor": "#f00",
"list": [
{
"pagePath": "pages/index/index",
"text": "index",
"iconPath": "./asstes/hot-active.png",
"selectedIconPath": "./asstes/hot.png"
}],最多5个，最少两个
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。
Key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容， <switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供：
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
   这里大家可以先体会一下key的概念，等到我们介绍到数据变化的时候在演示key作用。
<template name="magItem">
<view>课程名{{name}}</view>
<view>价格{{price}}</view>
</template>
<view>1111</view>
<template is='magItem' data="{{...courseObj}}"></template>
<include src="./template"></include>
样式引入@import './test_0.wxss'，可用的选择器有id，class，元素，伪元素（::after,::before）
小程序中的js有es和小程序框架，小程序api，渲染this.setData({}）
生命周期
onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady
onReady：生命周期函数--监听页面初次渲染完成
onShow：生命周期函数--监听页面显示，触发事件早于onReady
onHide：生命周期函数--监听页面隐藏
onUnload：生命周期函数--监听页面卸载
常见的事件类型
touchstart   手指触摸动作开始
touchmove   手指触摸后移动
touchcancel   手指触摸动作被打断，如来电提醒，弹窗
touchend   手指触摸动作结束
tap   手指触摸后马上离开
longpress   手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap   手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend   会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart   会在一个 WXSS animation 动画开始时触发
animationiteration   会在一个 WXSS animation 一次迭代结束时触发
animationend   会在一个 WXSS animation 动画完成时触发
在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡。
事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定
传参data-msg="我是事件的参数"

显示提示showToast({title:'',icon:'',image:'',duration:''})有图或icon时可显示7个字节，无图无icon可显两行，icon有success，loading，none
wx.showModal({title,content,confirmtext,canceltext,success: function(res)res.confirm,fail,complete})
同步缓存wx.setStorageSync(key:要存的东西)，取wx.getStorageSync(key)
异步缓存wx.setStorage(key:,data,success(){}),取wx.getStorage()，取wx.getStorage(key,success(){})
页面跳转wx.navigateTo({url:})保留当前页面，只能打开非 tabBar 页面。wx.redirectTo({})关闭卸载当前页面，只能打开非 tabBar 页面
tabBar跳转wx.switchTab关闭所有非tabbar页面，只能打开 tabBar 页面，不能url传参
wx.reLaunch({})关闭卸载所有页面，可以打开任意页面。(瑞郎此)
返回wx.navigateBack({data:1})返回的页数
wx.request({url:,method:'post',data,success:})