百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分析 > 正文

小程序-基础表达篇 小程序语句

liebian365 2024-10-22 15:41 25 浏览 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/

相关推荐

深度解密epoll 如何工作的?(epoll基本处理流程)

epoll...

大乐透第19082期:头奖开出7注1000万分落六地 奖池41亿元

2019年7月17日晚开奖的体彩超级大乐透第19082期开奖号码为:前区06、18、20、21、31,后区03、04。本期大乐透前区号码五区比为1:0:3:0:1,二区和四区号码没有给出。当期前区和值...

【开奖】4月27日周六:福彩、体彩(2021年4月27日体彩开奖结果)

4月27日开奖福彩3D第2019110期:61222选5第2019110期:0812202122排列3第19110期:303排列5第19110期:30305大乐透第19047期:0304...

“红狒狒”落户哈尔滨铁路局(哈尔滨铁路红肠)

这几天,“红人”“红狒狒”在牡丹江机务段可引起了不小的轰动,众粉丝争相与其拍照留念,在该段人气爆棚!“红狒狒”到底何许人也?“红狒狒”,中文名:和谐3D型电力机车;绰号:红狒狒、番茄;制造商:大连机...

2D、3D、2.5D,做游戏还是搞噱头?玩家都晕了

前言游戏类型就像某种潮流,一种流行罢,另一种接棒成为主流。前两年的新作大多以“开放世界”为标签,在追求纯沙盒的过程中打造出一些细致的分类,比如说“类GTA沙盒”。诚然,纯碎的沙盒游戏并不多见,业内只有...

《战神4》PC版宣传片发布 GTX 1070即可60帧畅玩

在今年10月的时候索尼PlayStation官方正式宣布圣莫尼卡2018年的《战神4》将于2022年1月14日推出PC版本,官方在今天公布了一段PC版宣传片,并且公开了游戏的配置需求。下面让我们一起来...

男星深情好丈夫形象崩塌,半夜搂美女坐大腿,举止亲密

近日,于晓光被拍到深夜在酒吧玩,结束后与一名女子一起上车离开。上车后,女子直接坐在了他腿上,他也顺势搂着美女,美女满脸笑容地坐在他腿上玩手机离开。可能有人会好奇,于晓光是谁呢?于晓光是韩国艺人秋瓷炫的...

d3d12dll丢失怎么修复?d3d12dll加载失败怎么解决?

  d3d12.dll丢失怎么修复?d3d12.dll加载失败怎么解决?很多朋友想要运行游戏的时候都会遇到这个问题,这种情况该怎么办呢?今天系统之家小编给朋友们讲讲具体的解决方法,操作其实还蛮简单的。...

许多玩家反馈《生化4RE》PC一直崩溃 无法进入游戏

今日(3月24日),卡普空《生化危机4:重制版》正式发售,然而有部分PC玩家遇到了游戏崩溃等问题。很多玩家在贴吧发帖称游戏遇到了严重的崩溃问题,且经常反复,报错代码普遍为FatalD3Derror...

微软正式推出适用于WSL Linux的D3D12 GPU视频加速技术

今天,微软正式向WindowsSubsystemforLinux(WSL)用户发布了Direct3D12GPU视频加速支持。在微软通过WSL允许在Linux下使用Open...

《怪物猎人:崛起》曙光系统报错“Fatal d3d error”的解决办法

《怪物猎人:崛起》曙光系统报错“Fatald3derror”的解决办法不少小伙伴反应《怪物猎人:崛起》DLC曙光预载以后打不开游戏,出现了Fatald3derror类似的错误代码,这类问题的解...

Mac+双屏,前端程序员的专业配置 - Loctek 乐歌 D3D 双屏电脑显示器支架

做FE也有一段日子了,电脑屏幕每天在设计稿、浏览器、IDE、即时通讯工具、Terminal、邮箱之间切换。虽然mac的工作区带来了很多灵活,但是依然略显不足。于是入手支架,把公司配的电脑和显示器发挥起...

RPC 的原理和简单使用(rpc详解)

RPC的概念RPC,RemoteProcedureCall,翻译成中文就是远程过程调用,是一种进程间通信方式。它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数。在调用的...

大厂开源的golang微服务rpc框架 — kitex

提前rpc估计所有的开发同学都知道,不知道的也无所谓,毕竟我也好几年没用了,今天带大家在复习一下。RPC(RemoteProcedureCall):远程过程调用,...

干货!一文掌握Protobuf所有语言所有用法,快收藏

说实话,Protobuf这个库,让人相见时难别亦难,东风无力百花残,每次等到要用它的时候,总感觉还没有完全掌握它的用法,而实际上等去百度或者谷歌的时候,教程都是多么的凌乱不堪。学会它,最直接关系到的,...

取消回复欢迎 发表评论: