开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
小程序中如何获取表单元素数据？
- 提交事件：给每个表单元素绑定
name属性，同时<form>也要有name属性，表单里的<button>组件form-type值为submit，会触发<form>身上的onSubmit事件，表单收集到的数据再e.detail.value属性上，值为一个对象，键名就是表单元素中绑定的name名。 - 重置事件：
<button>``form-type值为reset，触发表单的onReset事件，该事件里不需要写任何代码，表单元素就会重置。
//axml文件
<!-- 表单 -->
<form name="myForm" onSubmit="formSubmit" onReset="formReset">
<view>
<label>
姓名：<input name="name" type="text"/>
</label>
</view>
<label>
密码：<input type="text" password name="pwd"/>
</label>
<button size="mini" form-type="submit" type="primary">提交</button>
<button size="mini" type="primary" form-type="reset">重置</button>
</form>
//js文件
// 表单提交
formSubmit(e){
console.log(e.detail.value)
},
// 表单重置
formReset(){
// e.detail.value=''
}
rich-text富文本中如何插入html包含标签的数据？
需要自己将html转化为nodes数组。
如何处理 HTML String中存在多个 img 标签且不闭合时，mini-html-parser 会转换错误？
mini-html-parser2 0.3.0 已解决此问题，若当前使用老版本，请升级到最新的 0.3.0 版本即可。
如何为 rich-text 富文本 添加链接跳转功能？
受小程序管控原因，rich-text 中的a标签，无法像前端页面中，配置 <a href="https://render.alipay.com/p/s/web-view/index">Webview Demo</a> 即可实现跳转；小程序中需要使用对应的 JSAPI 或者 路由JSAPI 实现跳转路由。
// 使用 [mini-html-parser] 插件处理 html 字符串
import parse from 'mini-html-parser2';
const testHtmlString = '<a href="https://render.alipay.com/p/s/web-view/index">Webview Demo</a>' // html String
const HTML_A_TAG = 'a';
Page({
data: { nodes: [] },
onLoad() {
parse(testHtmlString, (err, nodes) => {
if (!err) {
const transferNodes = nodes.map(i => {
const { children, name, attrs } = i;
const obj = i;
// 这里没有处理 children
if (name === HTML_A_TAG) { // 这里假定 原本的htmlstring中 a标签为原本跳转的元素
obj.marks = { ...attrs, name: HTML_A_TAG }; // 小程序中不支持 a标签的href属性
//先把对应的href 属性放在marks中
}
return obj;
});
this.setData({ nodes: transferNodes }); // 更新到 rich-text 组件上
} else {
console.log('err: ', err);
}
})
},
handleOnTap(e) {
const {
detail: { marks }, // 获取自定义的marks
} = e;
const { name, href } = marks || {}; //
if (name === HTML_A_TAG && href) { // 判断是否是 a 标签，同时有 href 链接
my.ap.navigateToAlipayPage({ // 使用 my.navigateToMiniProgram 、
//my.navigateTo ... 实际跳转
path: href,
success: () => {
my.alert({ content: '成功' });
},
fail: (error) => {
my.alert({ content: '失败：' + JSON.stringify(error) });
}
})
}
}
})
<rich-text nodes={{nodes}} onTap="handleOnTap"></rich-text>
- 不过在上面例子中，真机上是可以实现页面跳转的，不过只能跳网址的这种链接，不知道为什么我自己本地文件的链接跳不了，显示错误。
