微信小程序开发入门基础知识

2018-10-17 14:58

摘要:根据最新的微信公开文档,我们知道微信的编码格式是固定的。

微信小程序文件格式

根据最新的微信公开文档,我们知道微信的编码格式是固定的。在每一个的文件夹下面,至少都会有一个.wxml和.js的文件,有可能还会包含.wxss和.json;而且,从文件夹到文件命名,都必须是一样的(都是index),如图所示:

/

微信小程序的文件都包含什么内容呢?

index.js。很显然,我们可以知道,index.js是一个js文件,我们学习过html5的人都知道,js文件就是用来存放逻辑代码的。所以,我们知道,这里的js文件是用来保存方法和数据。

/

根据图片我们知道,在inde.js里面,几乎所有的处理逻辑都在Page()里面,Page()里面传入的是一个json可是的数据,里面必须存在的一个键值对是

data:{};这里存放的是初始数据,整个页面里面需要调用的数据都会在这里存放,也可以在这里启用,一般调用的地方都在index.wxml里面;调用方式是:{{motto}}或者{{info.name}}。
这里的click键值对使用带存放一个函数方法的,这里的function(){}
里面就是你的处理逻辑;这里的click方法可以通过this.click()在Page()里面的别的方法里面使用,也可以在index.wxml里面通过bindtap=click来调用。

index.wxml:这里的index.wxml,我们知道在Android里面xml是布局文件,在html里面.html也用来存放布局格式的,所以,我们知道这里的index.wxml也是用来存放布局文件的。如图所示:

/

我们可以知道html文件是使用

来包裹布局,而这里的微信小程序十分简洁,只使用来包裹布局文件,当然这里还有别的布局文件,例如、、、...这些在微信小程序的官网会有说明。


index.wxss:我们学习前端的都知道,css是html里面的样式文件,用来给所有的标签编写样式,比如字体颜色,背景颜色等有事可以配置。这里的style样式一样可以使用class样式。

/


index.json:这里的index.json文件是用来保存配置文件的。以键值对的形式来储存数据,一般如果是page里面的json文件,就只需要配置app.json的windows里面选项配置。一般只有navigationBarBackgroundColor(顶部栏颜色)、navigationBarTextStyle(顶部栏样式)、navigationBarTitleText(顶部栏标题)、backgroundColor(背景色)、backgroundTextStyle(背景样式)。

微信小程序里面有一个全局的以app命名的文件,包括app.js,app.wxml,app.wcss,app.json。这里面的app.js里面包含的是全局的方法和数据,可以通过全局的方法getApp()获得一个app对象,来调用app.js里面的方法和数据。

微信小程序的基本数据格式。

微信if条件语句:

在微信中,用 wx:if={{condition}} 来判断是否需要渲染该代码块:

/


condition里面的就是判断条件,如果true就执行里面包裹的内容,如果false就会进行下一步。

微信for循环语句:

在微信里面,使用wx:for={{list}} 和wx:for-item={{item}},来实现循环。使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。使用 wx:for-item 可以改变数组当前元素的变量名,使用 wx:for-index 可以改变数组当前下标的变量名:

/

这里是一个九九乘法表的代码,使用的是嵌套循环。而且小程序的循环既可以在xml文件里面使用,也可以在js文件里面使用,在js文件里面使用就和原生的js使用方法相同。

相关资讯: 微信小程序   微信小程序开发教程

参与讨论

发表评论

扫码添加专属客服即可随时咨询

还可领取小程序推广攻略