电话热线: 19128460057
电话热线: 13410710107
首页>公司动态>微信小程序开发最常见的代码

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

作者:TPshop搜豹商城   发布时间:2019-12-10 15:24   阅读:2453

今天小程序小编为大家带来微信小程序开发最常见的代码,喜欢的记得收藏喔!


在通过微信小程序开发者工具开发一款小程序时,起初我们会自动生成一些文件目录,这个文件目录有4种不同的类型,主要分成4种:.wxml 后缀的 WXML 模板文件,.wxss 后缀的 WXSS 样式文件,.js 后缀的 JS 脚本逻辑文件以及. json 后缀的 JSON 配置文件,微信小程序的开发代码就是由这些构成。


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小程序商城


<TPshop(www.tp-shop.cn)是国内知名商城系统及商城网站建设开发商,为企业级商家提供零售商城、B2B2C多用户商城系统、网上商城开发、三级分销系统、开源网店系统、社区团购系统等多端商城及电子商务行业解决方案>

上一篇:小程序商城开发要注意哪些问题? 下一篇:小程序商城模板怎么挑选好的?
All Rights Reserved 深圳搜豹网络有限公司版权所有.粤ICP备15065422号 深圳市龙岗区坂田街道杨美社区六维商务中心C座三层C312
tel code back_top