您现在的位置: 首页 > 推荐 > 微信小程序代码大全 微信小程序常见代码详情(图文)

微信小程序代码大全 微信小程序常见代码详情(图文)

发布时间:2020-11-11 20:15:28 作者:编辑 栏目:推荐 阅读量:()

1、WXSS 样式:

WXSS就是小程序版的CSS,它具有CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

2、WXML 模板:

开发过网页的人知道,网页开发编程采用的是HTML+ CSS+JS这样的框架组合,其中HTML是用来制作当前这个页面的整体框架结构,CSS 用来提供结构样式,JS 则是进行逻辑处理以及这个页面和用户的交互。

JS 只需要管理状态即可:

this.setData({msg: Hello World })通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。

微信小程序开发最常见的代码

微信小程序开发最常见的代码

3、JSON 配置:

我们可以看到在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json,我们依次来说明一下他们的用途。

小程序配置 app.json

app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:

{ pages:[ pages/index/index, pages/logs/logs

], window:{ backgroundTextStyle:light, navigationBarBackgroundColor:#fff, navigationBarTitleText: WeChat, navigationBarTextStyle:black

}

}

这个配置各个项的含义如下:

pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 小程序所有页面的顶部背景颜色,文字颜色定义在这里的。

工具配置 project.config.json

通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调,那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。

4、JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

{{ msg }}点击我

点击 button 按钮的时候,我们希望把界面上 msg 显示成 Hello World,于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:

Page({

clickMe: function() { this.setData({ msg: Hello World})

}

})

此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取本地存储、用户信息、微信支付等。

以上4种是微信小程序开发最常见的代码,希望能帮到大家,想了解更多是商城网站建设问题,可以咨询TPshop小程序商城。

关键字: 程序代码

最新版权声明:叽叽歪歪吧提醒您:在浏览本本网站关于微信小程序代码大全 微信小程序常见代码详情(图文)文章时,请您务必阅读并理解本声明。本站部分内容来源于网络或者网友投稿,如果您认为本站不应该展示与您相关的信息,请及时与我们取得联系,我们会当天作出处理。

相关文章

拓展阅读

屠呦呦怎么读(屠呦呦个人简历及身家背景)(图文)
屠呦呦怎么读(屠呦呦个人简历及身家背景)(图文)屠呦呦怎么读:tú yōu yōu屠呦呦简介屠呦呦,女,1930年12月30日出生于浙江省宁波市,祖籍宁波鄞县(今宁波鄞州区)。父亲给她起名“呦呦”,源自中国古籍《诗经》中的诗句“呦呦鹿鸣,食野之萍&
2020-11-24 21:28:39 阅读(715)
李蒽熙整容前后(最美蛇精女李蒽熙简介)(图文)
李蒽熙整容前后(最美蛇精女李蒽熙简介)(图文)现如今,整容之风已经无处不在。小编已经压根分不清人工美女与天然美女了。娱乐圈美女云集,又有多少是天然的呢。明星们面临整容,向来持着打死不承认的态度。但是群众的眼睛是雪亮的。网上总有明星整容前后对比照曝光。看到这些,小编不得不钦佩韩国的整容术呀,真是到了
2020-11-24 21:27:02 阅读(811)
怎么用电脑给手机杀毒(最简单的杀毒办法)(图文)
怎么用电脑给手机杀毒(最简单的杀毒办法)(图文)安卓手机中病毒的机率比苹果的中招机率要大得多,手机病毒和木马危害都极其大,会感染常用手机软件,造成莫名的被吃费,泄露个人隐私信息,如果经常用手机购物或交易的话,很有可能泄露银行密码,造成不必要的金钱损失。如何辨别手机有没有中病毒,这是困扰很多小伙伴的
2020-11-24 21:26:57 阅读(439)
越国怎么灭亡的(春秋五霸中的越国灭亡真相)(图文)
越国怎么灭亡的(春秋五霸中的越国灭亡真相)(图文)说起我国先秦的春秋战国时期,那就不得不提到春秋五霸,战国七雄。其中五霸之一的越国自然是在历史上留下了浓墨重彩的一笔。可是一提起越国,那可真是一个伤心的故事,生为五霸之一,却在最后成为了争斗之中的牺牲品,没能继续书写自己的传奇。那么为什么前期强势无比
2020-11-24 21:26:49 阅读(269)
z开头的是什么车(一分钟带你看懂列车车票首字母)(图文)
z开头的是什么车(一分钟带你看懂列车车票首字母)(图文)火车票,英文名称是railway ticket。是乘客乘坐火车需出示的票据,主要由客票和附加票两部分构成。客票部分为软座、硬座。附加票部分为加快票、卧铺票、软卧票等。火车票面上包含多样信息,包括车型、时间、座位号等。中国火车票为硬纸票、软纸票
2020-11-24 21:26:16 阅读(492)

热门精选文章

最好的音乐手机是哪款 这6款音乐手机你值得拥有(图文)
2020-11-04 19:40:53
2020剑灵哪个职业厉害 2020剑灵职业大盘点(图文)
2020-11-04 21:00:46
宝塔镇河妖下一句涵义 全面解析其涵义(图文)
2020-11-04 21:01:36
2020剑网三新手职业推荐 新手推荐2大职业(图文)
2020-11-04 22:08:17
手机上facebook的方法 免费教你玩转Facebook(图文)
2020-11-04 22:07:27
哪个网站看电影好 免费分享6款追剧网站(图文)
2020-11-04 21:00:39
微信朋友圈怎么转发别人的说说 教你转发别人微信朋友圈说说(图文)
2020-11-04 23:09:18
蓝翔挖掘机学费多少钱 浅谈蓝翔技校学费细则(图文)
2020-11-04 23:09:32
玩游戏买什么台式电脑好 推荐5款台式电脑(图文)
2020-11-04 19:39:45
中专是什么文化程度 全方面解读中专文化程度(图文)
2020-11-05 15:06:16
怕什么来什么是什么定律 曝光其定律的全面解析(图文)
2020-11-05 00:33:02
扎西德勒是什么意思 西藏解释扎西德勒(图文)
2020-11-10 17:33:37
华为手机开不了机怎么办 手把手教你解决步骤(图文)
2020-11-12 17:33:42
空军中校是什么级别干部 全面解析空军级别(图文)
2020-11-05 14:29:52
视频码率是什么意思 浅析视频码率的定义(图文)
2020-11-06 16:57:33
童星面试黑幕 曝光童星面试黑幕细则(图文)
2020-11-06 17:38:52
壁挂炉阿里斯顿怎么样 带你全方面了解壁挂炉阿里斯顿(图文)
2020-11-04 21:01:22
十大直播电商平台薇娅 分享2020最新薇娅带货榜内况(图文)
2020-11-05 14:29:07
火影忍者木叶丸的爸爸是谁 浅谈火影忍者木叶丸的爸爸(图文)
2020-11-06 16:58:25
手机随身wifi多少钱一个月 一文解读手机随身wifi月费详情(图文)
2020-11-07 14:32:12