小程序-基础表达篇 小程序语句
liebian365 2024-10-22 15:41 20 浏览 0 评论
/约定/ 让我们轻装上阵
一个功能页(Page)的开发通常需要四大块:配置、代码、布局、样式。
这四大块承载不同的方面,要独立不混杂,又要整体融合。于是有了以下约定:
每一块 --> 独立的文件、相同的文件名、不同的扩展名。
按约定行事,自动融合。
于是,一个小程序的功能页 Page,就这样形成了。
- index.json
- index.js
- index.wxml
- index.wxss
而 app.js,app.json,app.wxss 则作为全局定义。
再继续来看代码部分
它少不了这三大块:数据、生命周期、功能过程。
不需要额外的配置,约定一种结构方式即可。
Page({ data, on阶段, func... }) 再来看四大块中的交互
通过约定之后,可谓我中有你,你中有我,wxss 定义的名称,wxml 可以根据需要使用,js 定义的数据,wxml 可以灵活呈现,数据变,呈现自动变。
常用表达
1.点击事件
通过 bindtap 属性指定一个功能函数名称即可。以下示例中,{{ msg }} 绑定代码中定义的数据属性 msg,按钮点击事件,执行代码中的 clickMe 功能函数,它改变了 msg 的值,则页面也会相应的呈现新的值。
<view>{{ msg }}</view> <button bindtap="clickMe">点击我</button> Page({ data: { msg : null }, clickMe: function() { this.setData({ msg: "Hello World" }) } }) 2.页面跳转
wx.navigateTo({ url: '../mypage', })
当存在参数时,如:
/mypage?id=123
可通过 onLoad 里 options 可取得参数,如 options.id
Page({ onLoad: function (options) { console.log(options.id); }, 3.获取输入值
输入控件 bindinput 指定输入事件,在传递的参数(如参数名为 e)中通过 e.detail.value 可以取到值。
<input id="ipt" bindinput='iptInput'></input> iptInput: function(e){ this.setData({ iptValue : e.detail.value}); }
4.JSON转换
stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
parse(string): 将 JSON 字符串转化成对象,并返回该对象。
5.WEB 请求
普通请求
在调试阶段,项目可以设置:开发环境不校验安全域名TLS版本与HTTPS证书。这样可以使用 http 做测试,正式环境要求使用 https。
wx.request({ url: 'http://.../test.php', data: { x: '' }, header: { 'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) } }) 文件上传
wx.uploadFile({ url: 'http://.../upload', filePath: this.data.fileinfo.path, name: 'myfile', formData: { id: "busiid", }, success: function (resu) { console.log(resu); wx.showToast({ title: '请求成功', }) }, fail: function(err){ wx.showToast({ title: '错误' + err.errMsg }) console.log(err); } }) 6.消息提示
wx.showModal({ title: '消息', content: '您点击了', showCancel: false }) wx.showToast({ title: '错误' + err.errMsg }) 7.引入weui-wxss
两个步骤
7.1下载
https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss
7.2引用
将weui.wxss 放在与 app.wxss 同一目录下。在app.wxss 中最前边引用即可。
@import 'weui.wxss';
文档:https://github.com/Tencent/weui/wiki
8.其它
当异步方法中要更新数据时,不能直接使用 this.setData,此时,可以在异步发起代码前加上 let that = this;,然后使用 that.setData 来操作。
在 app.json 配置 tabBar 可以直接定义底部导航。
{ "tabBar": { "color": "#ddd", "selectedColor": "#3cc51f", "backgroundColor": "#fff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/profile/profile", "text": "我的" } ] } }
其它组件、模板,WXS(WeiXin Script)参考官方开发文档。
https://developers.weixin.qq.com/miniprogram/dev/framework/
相关推荐
- 4万多吨豪华游轮遇险 竟是因为这个原因……
-
(观察者网讯)4.7万吨豪华游轮搁浅,竟是因为油量太低?据观察者网此前报道,挪威游轮“维京天空”号上周六(23日)在挪威近海发生引擎故障搁浅。船上载有1300多人,其中28人受伤住院。经过数天的调...
- “菜鸟黑客”必用兵器之“渗透测试篇二”
-
"菜鸟黑客"必用兵器之"渗透测试篇二"上篇文章主要针对伙伴们对"渗透测试"应该如何学习?"渗透测试"的基本流程?本篇文章继续上次的分享,接着介绍一下黑客们常用的渗透测试工具有哪些?以及用实验环境让大家...
- 科幻春晚丨《震动羽翼说“Hello”》两万年星间飞行,探测器对地球的最终告白
-
作者|藤井太洋译者|祝力新【编者按】2021年科幻春晚的最后一篇小说,来自大家喜爱的日本科幻作家藤井太洋。小说将视角放在一颗太空探测器上,延续了他一贯的浪漫风格。...
- 麦子陪你做作业(二):KEGG通路数据库的正确打开姿势
-
作者:麦子KEGG是通路数据库中最庞大的,涵盖基因组网络信息,主要注释基因的功能和调控关系。当我们选到了合适的候选分子,单变量研究也已做完,接着研究机制的时便可使用到它。你需要了解你的分子目前已有哪些...
- 知存科技王绍迪:突破存储墙瓶颈,详解存算一体架构优势
-
智东西(公众号:zhidxcom)编辑|韦世玮智东西6月5日消息,近日,在落幕不久的GTIC2021嵌入式AI创新峰会上,知存科技CEO王绍迪博士以《存算一体AI芯片:AIoT设备的算力新选择》...
- 每日新闻播报(September 14)_每日新闻播报英文
-
AnOscarstatuestandscoveredwithplasticduringpreparationsleadinguptothe87thAcademyAward...
- 香港新巴城巴开放实时到站数据 供科技界研发使用
-
中新网3月22日电据香港《明报》报道,香港特区政府致力推动智慧城市,鼓励公私营机构开放数据,以便科技界研发使用。香港运输署21日与新巴及城巴(两巴)公司签署谅解备忘录,两巴将于2019年第3季度,开...
- 5款不容错过的APP: Red Bull Alert,Flipagram,WifiMapper
-
本周有不少非常出色的app推出,鸵鸟电台做了一个小合集。亮相本周榜单的有WifiMapper's安卓版的app,其中包含了RedBull的一款新型闹钟,还有一款可爱的怪物主题益智游戏。一起来看看我...
- Qt动画效果展示_qt显示图片
-
今天在这篇博文中,主要实践Qt动画,做一个实例来讲解Qt动画使用,其界面如下图所示(由于没有录制为gif动画图片,所以请各位下载查看效果):该程序使用应用程序单窗口,主窗口继承于QMainWindow...
- 如何从0到1设计实现一门自己的脚本语言
-
作者:dong...
- 三年级语文上册 仿写句子 需要的直接下载打印吧
-
描写秋天的好句好段1.秋天来了,山野变成了美丽的图画。苹果露出红红的脸庞,梨树挂起金黄的灯笼,高粱举起了燃烧的火把。大雁在天空一会儿写“人”字,一会儿写“一”字。2.花园里,菊花争奇斗艳,红的似火,粉...
- C++|那些一看就很简洁、优雅、经典的小代码段
-
目录0等概率随机洗牌:1大小写转换2字符串复制...
- 二年级上册语文必考句子仿写,家长打印,孩子照着练
-
二年级上册语文必考句子仿写,家长打印,孩子照着练。具体如下:...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)