微信小程序的优势和劣势
优势
- 微信助理,容易推广。在微信中,小程序拥有众多入口,例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量,从而进行转化、变现。
- 使用便捷。用户在使用小程序时,只需要轻轻点一下就可以使用,更加符合用户对使用方便、快捷的需求,所以小程序的用户数量不断增加。
- 体验良好,有接近原生app的体验。在微信生态里,小程序在功能和体验上是可以秒杀掉 H5 页面的,H5 页面经常出现卡顿、延时、加载慢、权限不足等原因,而这些问题在小程序里都不会出现。
- 成本更低,从开发成本到运营推广成本,小程序的花费仅为APP的十分之一,无论是对创业者还是传统商家来说都是一大优势。
不足
- 单个包大小限制为2M,这导致无法开发大型的应用,采用分包最大是20M(这个值一直在变化,以官网为准)。
- 需要像app一样审核上架,这点相对于H5的发布要麻烦一些。
- 处处受微信限制。例如不能直接分享到朋友圈,涉及到积分,或者虚拟交易的时候,小程序也是不允许的。
项目的目录结构
- pages:
- wxml: 编写小程序界面结构的地方
- wxss: 编写小程序样式的地方
- json:编写界面配置的地方
- js:编写界面逻辑的地方
- utils: 编写工具类的地方
- app.js:创建程序实例的位置
- app.json: 编写全局配置地方
- app.wxss: 编写全局样式的地方
- project.config.json: 项目的配置文件
可以添加编译模式,来改变编译后的默认页面,方便开发
配置tabbar(需要注意的是,tabbar的图标不能是线上的地址,需要提前准备好放到项目里,一般情况下,这些静态资源可以放在assets文件夹下)
写在根目录的app.json文件中,需要注意list中最少要有两个,最多只能有五个
"tabBar": { "color":"", "selectedColor": "#f00", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "./assets/shouye.png", "selectedIconPath": "./assets/shouye1.png" }, { "pagePath": "pages/logs/logs", "text": "log", "iconPath": "./assets/bianji.png", "selectedIconPath": "./assets/bianji1.png" }, { "pagePath": "pages/home/home", "text": "我的", "iconPath": "./assets/grzl.png", "selectedIconPath": "./assets/grzl1.png" } ] },
WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。
view标签是我们开发过程中最常用的标签了,这个就相当于Html中的div。
text标签也是我们开发中常用的,这个相当于Html中的span
image标签相当于我们Html中的img。
数据定义
在界面对应的JS文件中的data属性上定义数据
data: {
msg:"hello world",
num: 18,
},
引用数据
通过{{}}的方式可以引用数据。
小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。
逻辑渲染
WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
<view wx:if="{{condition}}"> True </view>
使用 wx:elif 和 wx:else 来添加一个 else 块:
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名。
使用 wx:key 来指定列表中项目的唯一的标识符。
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
Template
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段,
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
在对应的js的data中
msgList:[
{
index: 0,
msg: '这是一段模板',
time: '2020-10-10'
}
]
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入。
<view wx:for="{{msgList}}">
<template is="msgItem" data="{{...item}}"></template>
</view>
模板的引用
WXML 提供两种文件引用方式import和include。
app.js的生命周期
- onLaunch: 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
- onShow:当小程序启动,或从后台进入前台显示,会触发 onShow
- onHide:当小程序从前台进入后台,会触发 onHide
- onError:当小程序发生脚本错误,或者 API 调用失败时,会触发 onError 并带上错误信息。
page中的生命周期
onLoad:生命周期函数--监听页面加载,触发时机早于onShow和onReady
onReady:生命周期函数--监听页面初次渲染完成
onShow:生命周期函数--监听页面显示,触发事件早于onReady
onHide:生命周期函数--监听页面隐藏
onUnload:生命周期函数--监听页面卸载
全局数据的定义以及获取
1.定义:app.js中的globalData中定义全局变量
2.获取:在其他JS中可以通过getApp()获取App实例,之后可以获取到定义在App实例上的数据。