电子商务网站建设方案,低学历吃香的十大职业,广告设计公司官网,灵芝住房和城乡建设局局网站1.创建一个包含#xff1a;首页、咨询、关于我们 3个标签的小程序#xff0c;每个标签都有对应的页面、图标和标签文字。
知识点#xff1a;app.json文件对小程序进行全局配置#xff0c;同名.json文件对本窗口进行配置
app.json属性#xff1a; pages用于指定小程序由哪…1.创建一个包含首页、咨询、关于我们 3个标签的小程序每个标签都有对应的页面、图标和标签文字。
知识点app.json文件对小程序进行全局配置同名.json文件对本窗口进行配置
app.json属性 pages用于指定小程序由哪些页面组成每一项都对应一个页面的路径信息文件名不需要写后缀编译后会自动寻找.json.js.wxml.wxss四个文件若为空则自动创建。
window属性 tabBar属性 list属性 实现效果 完整代码如下
//app.json{pages: [pages/index/index,pages/logs/logs,pages/flex/flex,pages/float/float,pages/index/flexlayout,pages/temperature/tem,pages/tiaojian/tiaojian,pages/chengji/chengji,pages/xunhuan/xunhuan,pages/jishiqi/jishiqi,pages/suijiflag/suijiflag,pages/zixun/zixun,pages/guanyu/guanyu,pages/bangding/bangding,pages/zuoyongyu/zuoyongyu,pages/ifxuanran/ifxuanran],window: {backgroundTextStyle: light,navigationBarBackgroundColor: #fff,navigationBarTitleText: 矿研友欢迎您,navigationBarTextStyle: black},tabBar: {color: #000000,selectedColor: #00f,list: [{pagePath: pages/index/index,text: 首页,iconPath: /images/home-off.png,selectedIconPath: /images/home-on.png},{pagePath: pages/zixun/zixun,text: 资讯,iconPath: /images/zixun-off.png,selectedIconPath: /images/zixun-on.png},{pagePath: pages/guanyu/guanyu,text: 关于我们,iconPath: /images/guanyu-off.png,selectedIconPath: /images/guanyu-on.png}]},style: v2,sitemapLocation: sitemap.json
}
//zixun.json
{navigationBarBackgroundColor: #0f0,navigationBarTitleText: 咨讯,navigationBarTextStyle: black
} 2.小程序的执行顺序 小程序注册函数AppObject object的参数属性
注册函数AppObject object用于注册小程序该函数必须在app.js中调用且只调用一次。
包含属性 PageObject object函数
用于注册小程序中的页面。包含的属性有 小程序整个生命周期的执行顺序为 3.数据及事件绑定
wxml是框架设计的一套标签语言结合基础组件、事件系统可以构建出页面的结构。
data对象是页面第一次渲染时使用的初始数据wxml中的动态数据均来自对应的Page的data。页面加载时data以JSON字符串的形式由逻辑层传至渲染层数据类型包括字符串数字布尔值对象数组等。
数据绑定渲染层可以通过wxml对数据进行绑定数据绑定使用Mustache语法即双括号:{{var}}将变量包起来可以用作内容、组件属性、控制属性、关键字、运算、组合、数组、对象等场景。
setData()函数用于将数据从逻辑层发送到视图层异步过程同时改变对应的this.data的值同步过程
事件绑定事件是视图层到逻辑层的通讯方式它可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上当触发事件后就会执行逻辑层中对应的事件处理函数。事件对象可以额外携带信息如iddatasettouches。
样例 实现代码
!--pages/bangding/bangding.wxml--
view classbox
view classtitle数据绑定示例/view
view算术运算绑定{{a}}{{a}}{{a}}{{abc}}/view
view对象绑定-学号{{Student.idnumber}}/view
view对象绑定-姓名{{Student.name}}/view
view对象绑定-生日{{Student.birthday}}/view
view数组绑定-array[0]{{array[0]}}/view
view数组绑定-array[1]{{array[1]}}/view
view数组绑定-array[2]{{array[2]}}/view
button typeprimary bindtapmodify修改绑定数据/button
/view
// pages/bangding/bangding.js
Page({data: {a : 10,b : 20,c : 30,Student :{idnumber:2010110225,name:Ann,birthday:20011230},array:[2018,2019,2020]},modify:function(){this.setData({a:100,b:200,c:300,Student:{idnumber:2010110221,name:fish,birthday:20011123},array:[2021,2022,2023]})}
}) 通过.js中的data对象初始化绑定的数据通过setData()函数修改绑定的数据。注意不是所有的绑定数据都要进行初始化setData()函数绑定的数据直接重新渲染不进行初始化。
4.变量和函数的作用域以及模块化
实现效果示例 跟其他编程语言一样在JavaScript中文件中声明的变量和函数只在该文件中有效。不同文件中的同名变量、函数互不影响。通过全局函数getApp()可以获取全局的应用实例。
可以将一些公共的代码抽离成一个单独的js文件作为一个模块模块通过module.exports或者exports对外暴露接口在需要这些模块的文件中使用requirepath将公共代码引入。值得注意的是path只支持相对路径
完整代码如下
!--pages/zuoyongyu/zuoyongyu.wxml--
view classbox
view classtitle变量模块化示例/view
view全局变量{{msg1}}/view
view全局函数{{msg2}}/view
view本文件变量{{msg3}}/view
view本文件函数{{msg4}}/view
view其他模块变量{{msg5}}/view
view其他模块函数{{msg6}}/view/view
// pages/zuoyongyu/zuoyongyu.js
const app getApp()//获取全局应用实例
var util require(../utils/utils.js);
var zuoyongyuMsg 我是来自zuoyongyu.js的变量;
function zuoyongyufunc(){return 我是来自zuoyongyu.js的函数;
}Page({data:{msg1:app.globalMsg,msg2:app.globalFunc(),msg3:zuoyongyuMsg,msg4:zuoyongyufunc(),msg5:util.utilMsg,//使用utils模块变量msg6:util.utilFunc()//使用utils模块函数}
})
// app.js
App({globalFunc: function(){return 这是来自app.js的函数;},globalMsg : 这是来自app.js的变量,})// pages/utils/utils.jsvar utilMsg 这是来自utls.js的变量;function utilFunc(){return 这是来自utils.js的函数;}module.exports {utilMsg:utilMsg,utilFunc:utilFunc} 5.条件渲染
wx:if
在框架中使用wx:if{{condition}}来判断是否需要渲染该代码块。
如view wx:if{{colorred}}红色/view的含义为如果color值是红色那么页面显示红色二字。
同理的有wx:if那么就会有wx:elifwx:else。
block wx:if
因为wx:if是一个控制属性需要将它添加到一个标签上。如果要一次性判断多个组件标签可以使用一个block/标签将多个组件包装起来并在上边使用wx:if控制属性。
如 block wx:if{{length10}} view classview-item bc-red红色/view view classview-item bc-green绿色/view view classview-item bc-blue蓝色/view /block
如果length的值10那么就会渲染3个view-item组件。
需要注意的是block/并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接收控制属性。
示例编写一个利用wx:if 实现颜色显示的小程序当wx:if放在view中并通过is文件传递一种颜色时窗口将显示该颜色名称和颜色。当 wx:if 放在block中并传递给变量length的值大于10时将在窗口下方显示红、绿、蓝三种颜色条否则将不显示。 !--pages/ifxuanran/ifxuanran.wxml--
view stylemargin:20px;text-align:center;利用view中的wx:if进行条件渲染view wx:if{{colorred}}红色/viewview wx:elif{{colorgreen}}绿色/viewview wx:elif{{colorblue}}蓝色/viewview wx:else其他颜色/viewview classview-item stylebackground-color:{{color}}/view
/viewview stylemargin:20px;text-align:center;利用block中的wx:if进行条件渲染block wx:if{{length10}}view classview-item bc-red红色/viewview classview-item bc-green绿色/viewview classview-item bc-blue蓝色/view/block
/view
/* pages/ifxuanran/ifxuanran.wxss */
.view-item{width: 100%;height:50px
}.bc-red{background-color:red;
}.bc-blue{background-color: blue;
}.bc-green{background-color: green;
}
// pages/ifxuanran/ifxuanran.js
Page({data:{color:blue,length:15}
})
