【小程序】微信小程序踩坑记（一）

最新推荐文章于 2024-10-14 17:03:38 发布
最新推荐文章于 2024-10-14 17:03:38 发布
阅读量247 收藏
点赞数
分类专栏： 前端研究记录 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MarronBan/article/details/114305296
版权
本文记录了作者在开发微信小程序过程中遇到的坑，包括span标签样式无法正常应用，按钮样式不能通过CSS设置，以及事件绑定传参的特殊方式。通过解决这些问题，作者总结了小程序开发与传统HTML/CSS/JS开发的不同之处。
摘要由CSDN通过智能技术生成

突发奇想

之前没怎么接触微信小程序，昨天突然想用用看。于是下了开发者工具，粗略看了下文档后，想写一个简单的猜拳游戏练手，于是就开始踩坑了。

实现

首先页面布局很简单，上半部分是AI出拳的信息，中间是显示用户赢了还是输了，下边就是三个按钮，让用户点击选择出什么拳。
本来以为wxss和css没啥区别，用css的套路写应该没问题。没想到那么快第一个坑就出现了

span标签不好用了

想采用

<P><span>胜</span>/<span></
最低0.47元/天 解锁文章
MarronBan
关注
专栏目录
一名Android开发者的微信小程序填坑之路(2)
lypeer的专栏
10-12 2万+
前言上一篇是九月二十七日写的，而这一篇我动笔的时间是十月十日（特殊的日子），中间相隔十三天——当然是因为国庆节。说老实话，这十三天里面我都没有碰和小程序有关的东西——毕竟学习小程序的开发也只是起于兴趣，而平时的工作并不会涉及与其相关的东西——但是在这十三天里，我能明显的感受到小程序热正在逐渐的消退，或者说大家正在逐渐以一种较为平和的姿态接受它的存在，其实这是一件好事。期待公测的到来。接下来我就直接进
微信小程序踩坑指南
weixin_34025051的博客
05-31 310
微信小程序降(小)妖伏(小)魔篇 开发就是一个西行取经的过程，期间不是一帆风顺，不定会遇到什么鬼。 最近开发一个简单的每日答题签到小程序，期间遇到一些始料未及的坑记录一下，避免日后重复踩坑。本文针对初入小程序的小白。:) 可能会有更好的解决方案，欢迎指正。 多张gif图预警，大概20M
微信小程序踩坑指南（一）前言和目录
TheJormangund的博客
04-19 168
前言 近段时间为公司开发一个微信小程序，由于之前只写过demo，没有完整地走完开发流程，因此这次的开发毫无意外地踩了很多坑，但同时也收集到了一些解决方案、文章、资料。 于是想着把这些东西整理、系统地汇集起来，一方面自己查阅起来方便，一方面为入坑的新人提供一些便捷。本来想把这一系列起名叫《微信小程序新手指南》，但想想口气有点大，所以还是换成了这个名字。 这一系列主要是针对作为新人在需求里比较容易遇到、或者比较容易犯错的坑点。在小程序老手、大佬面前可能是班门弄斧。如果文章中的内容有问题，或者有更好的解决方案，欢
innerHTML
helloworlddm的博客
08-28 564
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 代码如下：<html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr1").innerHTML); } </script> </head> <body><tab
微信小程序页面加载 HTML 标签（wxParse）
测试
01-28 2133
这里我对于文章的加载进行的微信小程序页面的内容加载问题的解决办法，由于一般文章都是富文本编辑器进行编辑的，不管你用的是什么编辑器，必须生成的就是HTML标签形式的页面，那么这种标签在web页面大家也就不必担心了，因为有js innerHTML，有jq的html(),但小程序有什么？wxParse.wxParse：不能说对于小程序唯一的，但是个人感觉还是相对来说最好的插...
微信小程序之JavaScript
朗朗上口就行啦的博客
05-18 4611
学习路径：菜鸟教程，主要就是熟悉一下JavaScript的语法规则，然后我学习的是微信小程序，所以JavaScript很多内容都不需要，例如在html中的使用 1、JavaScript简介 JavaScript 拥有动态类型，使用关键字 var 来定义变量，返回时确定数据类型 JavaScript使用分号分割语句（非必要），使用分号是可以在一行执行多条语句 JavaScript中的let命令所在的代码块内有效 JavaScript中的const不需要声明变量类型，c语言用法cons...
详解微信小程序框架wepy踩坑记录（与vue对比）
10-17
本文主要探讨了微信小程序框架wepy在实际开发中遇到的一些问题，并将其与Vue.js进行了对比。Wepy虽然借鉴了Vue的语法和特性，但在具体实现上存在一些差异，这可能导致开发者在使用过程中遇到坑点。 首先，关于组件...
微信小程序踩坑记
03-29
本次开发微信小程序第一个版本，遇到如下问题： 关于小程序里引入iconfont 原有H5项目中iconfont.css里@font-face 引用的ttf等文件在小程序中不支持（小程序里请求资源都是https）， 解决方法：知乎上有篇文章建议...
微信小程序开发踩坑记
03-29
前言微信小程序自去年公测以来，我司也申请了一个帐号开发，春节前后开始开发，现在终于告一个段落了。谨以此文记录下踩过的坑。坑1：scroll-view与onPullDownRefresh冲突由于有几个 ...       前言  微信小程序...
微信小程序语音搜索踩坑：silk文件格式转换，在PHP中使用
03-29
直接调用微信小程序录音接口，然后上传到服务器，百度语音的接口是识别不了这种格式的文件，那么问题来了 一、如何转码？ffmpeg？ 二、如何在PHP中使用？ 本文将要解决这两个问题。 用到的第三方工具： 1、百度语音 ...
innerHTML的简单应用
03-26
innerHTML的简单应用
微信小程序-微信小程序html转wxml
08-06
微信小程序,HTML转WXML。 usage: npm install html2wxml --save 或 引入src里面html2json.js/html2wxml.wxml/htmlparser.js/example.wxss到工程lib目录下; 在需要将html转wxml的地方按下添加代码; wxml: <!--按实际工程目录结构--> js: 'use strict'; import {html2json} from '../src/html2json';//按实际工程目录结构 Page({ data: { innerHTML: html2json('abc'/*需要转的html*/).child }, ... }); wxss: @import "../src/html2wxml.wxss";//按实际工程目录结构 TIP: 在example.wxss中，可自定义添加修改html标签对应的样式，以满足不同的需求，也欢迎提供全面的样式提交pull request。 标签列表： [
微信小程序之动态改变内容①文字改变②显示隐藏
热门推荐
Cream_Cicilian的博客
02-28 1万+
动态改变内容①文字改变②显示隐藏 ①文字改变 先进行数据的简单绑定 数据绑定使用 Mustache 语法（双大括号）将变量包起来 &lt;button bindtap='btnClick' &gt; {{btnText}}&lt;/button&gt; 在本页面对应js中 Page({ data: { btnText:"按钮内容" } }), btnClick:fun...
微信小程序：web-view开发实践
草灯的专栏
01-18 5905
使用该组件有个先决条件，就是得到小程序公众平台设置网页的域名白名单，具体做法请自行登录查看。 然后在小程序写入如下测试页：： test.js：： onLoad: function (options) { this.setData({ url: 'https://你的域名/test.html?rnd=' + new Date().getTime() }) }
微信小程序使用wxParse解析html
前进者
09-17 8909
最近项目上遇到在微信小程序里需要渲染文章，后台返回的是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现。首先我们在github上下载wxParsehttps://github.com/icindy/wxParse wxParse 下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下 ...
微信小程序项目开发实践
万少博-FE
07-05 1万+
最近更新时间：2017年7月5日17:25:46     现在的前端工程师职责越来越重要，很多新的技术都是从前端领域分离出来，微信小程序就是一个很好的前端技术的实践。开发微信小程序前，总觉得神秘面纱不可及，但经过前端团队一个月辛苦奋战，微信小程序从此不再陌生，而变得熟悉和可控。现在，小程序终于上线了，我也终于有时间来分享一下开发过程中遇到的问题。 0、开发过程中需要遵守的两
微信小程序 16 登录界面
小哞^同^学的技术博客
07-13 5258
在 2022 年之前，如果 我们想在小程序里，做到 双向数据绑定。并且 用一个事件绑定多个元素的话。可能会用到 事件委托 和 事件函数里 event 对象传过来的值。所以我们也趁此机会 了解一下 事件委托是什么。事件委托也叫事件代理，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。：即一个元素的事件触发后，会依次一级一级往上调用父级元素的同名事件，直到 window（浏览器窗口）。这个其实也很好理
小程序解析html富文本插件wxParse配制全面指南
GUK
05-30 1万+
第一步：下载wxParse下载地址：https://github.com/icindy/wxParse点击下载压缩包包含的文件，【红框文件】需要拷贝到小程序根目录第二步：使用教程官网教程（原本想说的，还是算了，如果想看的直接去作者：https://github.com/icindy/wxParse 这里看就行了！我看了这个文档，竟然进了一次坑！直接晒我的教程吧！）我的教程第一步：配制xx.wxml...
小程序底部导航按钮实现
最新发布
Wangguang_的博客
10-14 189
新建一个小程序项目，我是创建了JS模板，项目创建完成后需要新建五个文件夹，其中四个（page子文件夹）用于存放pages文件，一个sources文件夹（与pages同级）用于存放资源文件，如图标文件。需要在app.json中添加以下配置信息，其中tabBar是新增的，其余均为系统默认生成。图标需要8个，因为选中的图标和未选中的图标需要进行区分。商城小程序需要四个底部导航按钮，遂记录一下实现过程。图标文件源于阿里巴巴矢量图库。最终实现效果如下所示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值