一. 小程序的项目结构
-
1.pages 存放小程序的页面
page.js 页面的入口文件
page.wxml 页面结构 相当于 html
page.wxss 页面的样式 相当于 css
page.json 页面的配置文件
页面的json文件只能配置window选项
2.utils 工具类
app.js 应用的入口文件
app.json 应用的配置文件
-
- pages 存放页面的路径
放在第一个文件的路径为默认打开
window 窗口配置
颜色、文本、下拉...
tabbar
networkTimeout
debug 4.app.wxss 全局的样式
- project.config.json 整个项目的配置文件
- sitemap.json 索引文件
二.小程序的生命周期
2.1. 应用的生命周期
onLaunch
应用打开只执行一次 ，可以用于初始化本地存储
onShow
显示当前应用
onHide
隐藏应用在后台，但是并没有关闭
2.2 页面的生命周期2
onLoad
页面加载立即执行，只执行一次，适用于发起网络请求
onReady
页面加载立即执行，只执行一次，适用于操作DOM
onShow
当前页面显示调用，多次调用，适用于页面切换的时候状态回滚
onHide
离开当前页面执行，多次调用
onUnload
关闭页面后执行
三.数据绑定及渲染
3.1数据绑定
{{msg}}
data: {
msg:'hello 小程序',
},
3.2 列表渲染
<!-- wx:item="key"：修改item的名称 -->
<!-- wx:index="value"：修改index的名称 -->
<view wx:for="{{arr}}" wx:item="key" wx:index="value" wx:key='index'>
<!-- 值为：{{item}}------索引为：{{index}} -->
值为：{{key}}------索引为：{{value}}
</view>
data: {
arr:[1,2,3,4],
isShow:true,
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
},
3.3 属性绑定
<view id='home'></view>
<view id="{{msg}}"></view>
3.4 条件渲染
<!-- 这种方式会删除节点 -->
<view wx:if="{{isShow}}">
loading....
</view>
<view wx:else>
done
</view>
<!-- true为隐藏，该方法不会删除节点，只是隐藏 -->
<view hidden="{{!isShow}}">
loading....
</view>
<view hidden="{{isShow}}">
done
</view>
data: {
isShow:true
}
3.5 template模板
<!-- 定义模板 -->
<!--方法一-->
<!-- <template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template> -->
<!--方法二：在外部创建一个msgItem的wxml文件，将上面的定义模板抽取出去-->
<!-- 引入模板 -->
<import src='./msgItem.wxml'></import>
<!-- 使用模板 -->
<!-- is="模板名称",data={
模板的数据，是对象
} -->
<template is="msgItem" data="{{...item}}"/>
3.6 wxs
<view>{{foo.show()}}</view>
<!-- module:设置模块名称,必须是common js 规范 -->
<wxs module="foo">
module.exports={
show:function(){
return '小燕纸'
}
}
</wxs>
3.7 事件绑定
<!-- 函数绑定的时候不需要{{}}解析 -->
<!-- data-id：自定义属性 -->
<button bind:tap='handleClick' data-id='111'>点我</button>
<input class="input" bind:input='handleInput'/>
data: {
msg:'hello 小程序',
arr:[1,2,3,4],
isShow:true,
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
},
handleClick(e){
console.log(e);
// e.target.dataset.id：自定义属性
console.log(e.target.dataset.id);
},
3.8.1组件式跳转
- navigator
url 跳转的路径
open-type 跳转的类型 :navigate/switchTab(用于跳转到 tabBar 页面)
<navigator
url="/pages/logs/logs?id=2"
open-type="navigate"
hover-class="none">
跳转到logs
</navigator>
<navigator
url="/pages/text/text"
open-type="switchTab"
hover-class="none">
跳转到text
</navigator>
3.8.2 编程式跳转
wx.navigateTo({}): 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.switchTab({})：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch({ url: '/pages/test/test' })：关闭所有页面，打开到应用内的某个页面
<button bind:tap="goDetail">跳转</button>
<van-button type="primary" bind:tap="goDetail">跳转</van-button>
goDetail(){
// wx.navigateTo(
// { url: '/pages/logs/logs?id=2'}
// );
wx.switchTab({ url: '/pages/text/text' });
},
四.vant-weapp的使用
1.通过 yarn 安装
yarn add @vant/weapp --production
2. 修改 app.json
将 app.json 中的 "style": "v2" 去除
3.修改 project.config.json
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
4.构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
image.png
5.引入组件
以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。
// 通过 npm 安装
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
6.使用组件
引入组件后，可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>
