微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手

2024-05-10 17:54:35

微信小程序 -快速上手

第一个小程序

成功

导入一个已经在开发中项目

vscode 设置

设置高亮

拷贝到 settings.json

"files.associations": {"*.wxml": "html","*.wxss": "css",
},

重启 vscode 打开 wxml 文件观察有没有高亮

安装小程序开发插件

小程序目录结构

配置文件

全局配置 app.json

pages 字段

只能在微信开发者工具中编辑 pages字段，按下保存才生效！！！

pages 快速创建页面的时候在里面创建即可

 "pages": ["pages/index/index","pages/index3/index3"],

作用：

快速创建页面的 只能在微信开发者工具编辑代码才行
指定页面启动顺序

window

窗口

  "window": {"navigationBarBackgroundColor": "#ffda11","navigationBarTitleText": "拼多多123","navigationBarTextStyle": "yellow"},

tabBar

  "tabBar": {"selectedColor": "#e64a19","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icons/home.png","selectedIconPath": "icons/home-o.png"},{"pagePath": "pages/index3/index3","text": "页面3","iconPath": "icons/cart.png","selectedIconPath": "icons/cart-o.png"}]},

页面配置

页面.json

只能修改全局配置中 window字段的功能, 不需要再添加window字段

{"navigationBarTitleText": "页面3","navigationBarTextStyle": "white"
}

模板语法

条件渲染

列表渲染

事件绑定

事件传参

data的获取和设置

输入框的补充

rpx

小程序中独有响应式px单位规定 750rpx = 屏幕的宽度

计算屏幕适配公式

适用于小程序和 web

calc

width: calc(750rpx * 100 / 375);

vscode 插件来计算

安装插件

设置设计稿的宽度 在vscode中设置

  // 设置设计稿的宽度"px-to-rpx.baseWidth": 375

重启vscode
直接使用

添加客服

管理员

登录自己小程序后台，添加微信号 - 客服
添加客服 - 添加微信号

客服人员

客服人员需要扫码表示登录

普通用户

使用小程序点击 button 按钮进行联系客服

开发者

<!-- buttonopen-type 指定按钮功能contact 联系客服功能-->
<button open-type="contact">联系客服</button>

自定义组件

简单使用

创建组件

注册组件

index16.json
{"usingComponents": {"border-image": "../../components/border-image/border-image"}
}

使用组件

index16.wxml
<border-image></border-image>

父组件向子组件传递数据

父组件

index16.wxml
<border-image src="/images/1.png"></border-image>
<border-image src="/icons/home.png"></border-image>
<border-image src="/icons/home-o.png"></border-image>

子组件

border-image.js

Component({/*** 组件的属性列表*/properties: {// 父组件传递过来的数据 srcsrc: {// 数据类型type: String,// 默认值value: '',},},
});

border-image.wxml

<image mode="aspectFill" class="border-image" src="{{ src }}"></image>

子组件向父组件传递数据

子组件

绑定点击事件 bindtap="handleTap"

border-image.wxml

<image bindtap="handleTap" mode="aspectFill" class="border-image" src="{{ src }}" ></image>

border-image.js 定义点击事件的处理函数

必须把处理函数写在 methods 对象中才行

Component({methods: {handleTap() {},},
});

点击事件触发获取到被点击图片的src属性和传递给父组件

handleTap() {this.triggerEvent('srcChange', this.properties.src);
},

父组件

index16.wxml 绑定自定义事件 srcChange

<border-image bindsrcChange="handleSrcChange" src="/images/1.png" ></border-image>

index16.js 定义事件处理函数 handleSrcChange

Page({handleSrcChange(e) {},
});

在事件处理函数中接收数据和设置到父页面自己的数据中

// pages/index16/index16.js
Page({data: {src: '',},// 接收子组件传递过来的数据handleSrcChange(e) {console.log(e.detail);this.setData({src: e.detail,});},
});

补充

浏览器格式化json数据插件

微信小程序 ---在Vscode上编辑，微信开发者工具上预览，快速上手相关推荐

微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常
微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常参考文章: (1)微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,i ...
微信小程序之wx.request:fail错误，真机预览请求无效问题解决，安卓,ios网络预览异常(转)...
问题描述:域名已经备案,我全部都有,也在后台配置了,但是手机预览,还是请求失败, PC端是可以请求数据出来的新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能 ...
微信小程序基于最新版1.0开发者工具分享－小试牛刀(视频) 发布流程
第一章:小程序初级入门教程小试牛刀[含视频] 视频地址:https://v.qq.com/x/page/i0554akzobq.html 这一章节中,我们尝试着写一个最简单的例子,包含 2 个静态页 ...
1000套微信小程序源码源代码带后台带运行截图预览图学习资料网盘下载
1000多套微信小程序源码带后台+教程+不同行业的源码集合 o2o行业 | - 盒马鲜生 | - 轻客洗衣互联网行业 | - 云文档 | - 仿ofo共享单车 | - 仿美团外卖 | - 仿饿了么 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
微信小程序开发聊天室——实时聊天，支持图片预览
第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种.第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了. 首先看一下界面,界面 ...
微信小程序--数据库数据批量导出为excel文件，预览下载
1.首先构建node.js云函数,安装类库右键点击创建的云函数,在外部终端输入npm install node-xlsx下载安装 npm install node-xlsx npm install ...
微信小程序轮子 - 调起摄像头拍照并在页面预览（身份证拍照 / 人像拍照等等）
文章底部,获取示例源代码,克隆仓库运行起来. 代码干净整洁,无任何冗余代码, 根据自己的需求,进行改造即可. 效果图
微信小程序踩坑（一）——开发者工具更新时，显示不能打开要写入的文件
当遇到这种情况, 关闭开发者工具,然后进程里还有的话也结束掉再重试就可以了. ctrl+shift+delete -------->打开任务管理器,清理相关的进程
微信小程序视频播放，点击视频大屏展示预览
<video src="{{videosrc}}" bindtap="previewVideo" data-current="{{videosr ...

最新文章

热门文章