微信小程序
AI-摘要
KunKunYu GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
本文最后更新于 2024-03-24，文章内容可能已经过时。
01 安装 npm 包
切换至小程序项目目录
C:\Users\Administrator\WeChatProjects\miniprogram-6>初始化：
npm init -y 02 安装 Vant Weapp
# 通过 npm 安装
npm i @vant/weapp -S --production# 修改 app.json
将 app.json 中的
"style": "v2"去除，
# 修改project.config.json 使开发者工具可以正确索引到 npm 依赖的位置
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}# 构建 npm 包
点击开发者工具中的菜单栏：工具 --> 构建 npm 文档
03 使用 组件
// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}引入组件后，可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>04 微信小程序基础
以下内容没有什么用，可以到微信小程序文档直接阅读，微信小程序文档写的很清楚
04-01 目录结构
目录结构
├── app.js 小程序逻辑
├── app.json 小程序公共配置
├── app.wxss 小程序公共样式表
├── miniprogram_npm 存放构建打包后的 npm 包（小程序真正使用的 npm 包）
│ └── @vant
├── node_modules npm包（不会参与编译、上传和打包中）
│ ├── @types
│ └── @vant
├── package-lock.json 锁定安装时的包的版本号
├── package.json 对项目或者模块包的描述
├── pages 页面
│ ├── index
│ ├── logs
│ ├── package-lock.json
│ └── package.json
├── project.config.json 项目配置文件
├── sitemap.json sitemap 配置
└── utils 工具类
└── util.js
04-02 全局配置 [基本的页面布局]
01pages 页面路径列表
app.json
"pages":[
"pages/index/index",
"pages/logs/logs"
],默认第一个为第一显示页面
02window用于设置小程序的状态栏、导航条、标题、窗口背景色。
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微信",
"navigationBarTextStyle":"black"
},03tabBar客户端窗口的底部或顶部有 tab 栏可以切换页面
"tabBar": {
"color": "#999",
"selectedColor":"#07c160",
"backgroundColor":"#7a91c7",
"list": [
{
"pagePath": "pages/index/index",
"text":"首页"
},
{
"pagePath": "pages/logs/logs",
"text":"商品"
}
]
}04-03 页面配置
在pages下的页面json中配置单独页面的配置 例如index.json
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}04-04 数据绑定
index.js
data: {
id: 1,
text: '我是data的数据呀',
array: [
{name:'数组数据1'},
{name:'数组数据2'}
],
condition: true,
a: 1,
b: 2,
c: 3,
name: 'MINA',
moboer:0
},
index.wxml
<!-- 测试 数据的绑定 -->
<view class="conter">
<view>{{id}}</view>
<view>{{text}}</view>
<view>{{array[0].name}}</view>
</view>
<!-- 组件属性 -->
<view id="itembo-{{id}}">
</view>
<!-- 控制属性 -->
<view wx:if="{{condition}}"> 我是数据 </view>
<view wx:if="{{length > 5}}"> </view>
<checkbox checked="{{condition}}"> </checkbox>
<!-- 算数运算 -->
<view> {{a + b}} + {{c}} + d </view>
<view>{{"hello" + name}}</view>
<!-- 数组 -->
<view wx:for="{{[moboer,1,2,3]}}" wx:key='index'> {{item}} -- {{index}}</view>04-05 列表渲染
data: {
array: [{
text: '哪有什么突然想起，只是一直放在心里。'
}, {
text: '和你在一起我连眼泪都不舍得掉'
}]
},
<view class="listGenerate">
<!-- wx:for -->
<view wx:for="{{array}}" wx:key="index">
{{index}}:{{item.text}}
</view>
<!-- block wx:for -->
<block wx:for="{{array}}" wx:key="index">
<view> {{item.text}}: </view>
</block>
</view>
04-06 条件渲染
data: {
databer: 10,
isTrue: false
},
<!-- 条件渲染 -->
<view class="listGenerate">
<!-- wx:if wx:elif wx:else -->
<view wx:if="{{databer > 18 }}"> 您好：欢迎光临 </view>
<view wx:elif="{{databer < 18}}"> 不好意思：您年龄未满18岁 </view>
<view wx:else> 没有身份信息，禁止入内 </view>
<!-- block wx:if -->
<block wx:if="{{isTrue}}">
<view> “只是希望你在绝望的时候能够想到我” </view>
</block>
</view>04-07 定义模板
新建：template\messages\messages.wxml
template\messages\messages.wxss
messages.wxml
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class="messageBox">
<text class="messageContent"> {{index}}: {{msg}} </text>
<view class="messageTiem">
<text> Time: {{time}} </text>
</view>
</view>
</template>
<template name="msgItemtrue">
<view class="messageBoxtrue">
<text class="messageContent"> {{index}}: {{msg}} </text>
<view class="messageTiem">
<text> Time: {{time}} </text>
</view>
</view>
</template>
messages.wxss
.messageBox {
background-color: #eeeeee;
padding: 15rpx 20rpx;
margin-top: 15rpx;
width: 100%;
color: rgb(158, 158, 158);
font-size: 35rpx;
border-bottom: 1px solid #dddddd;
}
.messageBoxtrue{
background-color: #2cfa03;
padding: 15rpx 20rpx;
margin-top: 15rpx;
width: 100%;
color: rgb(255, 255, 255);
font-size: 35rpx;
border-bottom: 1px solid #003cff;
}
模板的使用：
index.wxml
<!-- 模板 -->
<import src="../../template/messages/messages.wxml" />
<!-- <template is="msgItem" data="{{...item}}"/> -->
<block wx:for="{{items}}" wx:key="index">
<template is="{{2 % 2 == 0 ? 'msgItem' : 'msgItemtrue'}}" data="{{...item}}" />
</block>
index.wxss
@import "../../template/messages/messages.wxss"
index.js
data: {
databer: 10,
isTrue: false,
items: [
{
index: 0,
msg: 'this is a template',
time: '2016-09-15'
},
{
index: 1,
msg: 'this is a template',
time: '2016-09-15'
}
]
},05 自定义组件[简单的弹窗]
在根目录上创建一个components文件夹，作为自定义组件
创建Popup文件并且添加pege
Popup.json
{
"component": true
}
Popup.wxml
<view class="dialog" hidden='{{!show}}'>
<view class="dialog-content">
<view class="dialog-close" bindtap="close">x</view>
<slot></slot>
</view>
</view>
Popup.wxss
.dialog{
position: fixed;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width:100vw;
height: 100vh;
background-color: rgba(0,0,0,.8);
}
.dialog-close{
position: absolute;
top:-25rpx;
right:-25rpx;
width:50rpx;
height: 50rpx;
border-radius: 50rpx;
text-align: center;
line-height: 50rpx;
background-color: #fff;
}
.dialog-content{
position: relative;
padding: 30rpx;
background-color: #fff;
border-radius: 10rpx;
}
Popup.js
切记这里不是page
Component({
properties: {
},
data: {
show:false
},
methods: {
open(){
this.setData({
show:true
})
},
close(){
this.setData({
show:false
})
this.triggerEvent("close")
}
}
})
以上就是一个简单的组件， 使用组件
在index的page中使用
index.json
"usingComponents": {
//与vue注册组件类似，只是小程序中，注册组件放到了json中
"app-dialog": "/components/Popup/Popup",
}
index.wxml
<button bindtap="openDialog">显示弹窗</button>
<app-dialog id="dialog" wx:if="{{showDialog}}" onclose="dialogClose">
<view class="content">
随便写点内容
</view>
</app-dialog>
index.js
// 处理事件内容
openDialog() {
this.setData({
showDialog: true
})
this.selectComponent("#dialog").open();
},
dialogClose() {
console.log("父组件监听到弹窗已关闭")
},06 组件传值
06-01父组件给子组件传值：
1.父组件传值：
<List workList="sss"></List>
2.子组件接收用js
Component({
properties: {
workList: {
type: String,
value: ''
}
},
})
3 直接绑定渲染
<view>{{workList}}</view>06-02 子组件给父组件传值：
子组件中
this.triggerEvent('myevent','aaa');
父组件
<List workList="sss" bind:myevent="myevent"></List>
js中
myevent：function （e）{
打印
}06-03 全局传值（简单文章页面）
// 步骤一：在全局app.js文件中定义数据
globalData: {
userInfo: 'hus7485^ljjk',
userName: '全局变量传值',
fomberr: '数据值'
}
// 步骤二：获取应用实例，不然无法调用全局变量
const app = getApp()
// 步骤三：调用全局变量
Page({
data: {
},
onLoad: function (options) {
console.log(app.globalData.userName);
},
})06-04 url传值
// 步骤一：使用关键字bindtap绑定一个点击事件方法，data-index是传入一个值
<image class="btn-detail" src='/images/btn_detail.png' bindtap='toDetail' data-index='{{index}}'></image>
// 步骤二：在脚本文件中定义这个方法（方法并不是定义在一个methods集合中的）
Page({
data: {},
onLoad: function () {},
toDetail: function(e){
// index代表的遍历对象的下标
var index = e.currentTarget.dataset.index;
var proList = this.data.proList;
var title = proList[index].proName;
wx.navigateTo({
url: '/pages/detail/detail?title='+title,
})
}
})
// 步骤三：在detail组件的脚本文件中接收title这个传入过来的值
Page({
data: {},
onLoad: function (options) {
console.log(options.title);
},
})06-05Storage传值
// 步骤一：使用关键字bindtap绑定一个点击事件方法，data-index是传入一个值
<image class="btn-detail" src='/images/btn_detail.png' bindtap='toDetail' data-index='{{index}}'></image>
// 步骤二：在脚本文件中定义这个方法（方法并不是定义在一个methods集合中的）
Page({
data: {},
onLoad: function () {},
toDetail: function(e){
var index = e.currentTarget.dataset.index;
var proList = this.data.proList;
var title = proList[index].proName;
wx.setStorageSync('titleName', title);
wx.navigateTo({
url: '/pages/detail/detail',
})
}
})
// 步骤三：在detail组件的脚本文件中使用wx.getStorageSync接收titleName这个传入过来的值
Page({
data: {},
onLoad: function (options) {
var titlen = wx.getStorageSync('titleName');
console.log(titlen);
},
})
阅读建议
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果