微信小程序学习笔记(二)
来源:互联网 发布:js数组去重 编辑:程序博客网 时间:2024/06/05 03:52
- 目录结构
- pages
- typings
- utils
- appjs
- appjson
- pages相关设置
- tabBar的相关配置
- 数据展示
- 数据的绑定
- 数据循环
- if判断
- END
- 同系列文章目录
目录结构
小程序的基本目录结构如图(1)所示:
pages
pages目录下,每个文件夹代表了一个页面的所有配置,一般情况下每个文件夹下都有四个文件,并且每个文件名都必须和文件夹名相同,只有后缀不同。
- .js文件用来处理每个页面的方法,和我们熟知的js文件作用一样
代码示例:
//index.js
//获取应用实例
var app = getApp()Page({ data: { motto: 'Hello World wechat', userInfo: {} }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }, bindViewDemo: function () { wx.navigateTo({ url: '../demo/demo' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function (userInfo) { //更新数据 that.setData({ userInfo: userInfo }) that.update() }) }})
其中data:{}
是本页面可以用的数据, 页面上需要调用的方法都必须写到Page({})
中。
- .json文件用来管理页面的配置, 具体配置项如下:
代码示例(注:.json中不能有注释):
{ "navigationBarTitleText": "demo" }
- .wxml文件和html的作用一样,用来编辑页面内容。
- .wxss的作用和css一样,用来存放class样式。(注:非必须的,可以不要)
typings
系统自动生成的,不用管了。
utils
系统自动生成的,不用管了。
app.js
全局js, 整个APP中都需要使用的方法和变量都可以定义到App({})
中,示例代码:
//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null }})
app.json
我们通过app.json来配置项目文件的路径、窗口的表现、还有配置多个切换页等。
示例代码:
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/demo/demo" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black", "enablePullDownRefresh": true }, "tabBar": { "borderStyle": "white", "list": [ { "pagePath": "pages/index/index", "text": "text", "iconPath": "img/微信.png", "selectedIconPath": "img/微信.png" }, { "pagePath": "pages/demo/demo", "text": "text", "iconPath": "img/微信.png", "selectedIconPath": "img/微信.png" } ] }}
pages相关设置
app.json中的所有文件路径都不要后缀的,其中"pages": []
中第一个文件路径将作为app的首页。
tabBar的相关配置
"list"
中相关配置:
数据展示
数据的绑定
小程序支持数据的双向绑定,这点和angularJs差不多,使用也非常简单。
test.wxml代码:
<view>{{text}}</view><view>{{array[0].msg}}</view>
test.js中代码
Page({ data:{ text:"Page test", array:[{msg:'1'},{msg:'2'}] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})
效果如图(3):
数据循环
使用方式和angularJs的*ngFor几乎一样
test.wxml代码:
<view>{{text}}</view><view>{{array[0].msg}}</view><view wx:for="{{array2}}">{{item}}</view>
test.js中代码
Page({ data:{ text:"Page test", array:[{msg:'1'},{msg:'2'}], array2:[1,2,3,4,5] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})
效果如图(4):
if判断
wx:if和angularJs的*ngIf几乎一样,看来小程序开发团队借鉴了不少angular的东西。
test.wxml代码:
<view wx:if="{{view=='WEBVIEW'}}">WEBVIEW</view><view wx:elif="{{view=='APP'}}">APP</view><view wx:else="{{view=='MINA'}}">MINA</view>
test.js中代码
Page({ data:{ view:'MINA' }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 }})
效果如图(5):
END
小程序的开发基础基本就这些了,下次开始讲主要的组件的使用吧。
同系列文章目录
微信小程序学习笔记(一)——小程序的快速搭建与入门
微信小程序学习笔记(三)——小程序简单组件的使用
- 微信小程序学习笔记(二)
- 微信小程序学习笔记(二)- 小程序中的canvas
- C语言程序学习(二)笔记
- EJB学习笔记二(HelloWorld程序)
- 小程序学习笔记(二)
- 程序猿学习笔记(二)
- 微信小程序笔记(二)
- 微信小程序学习(二)
- 学习微信小程序(二)
- Web Server程序编写学习笔记(二)
- ACE学习笔记二(开发聊天程序)
- Ogre学习笔记(二)创建第一个OGRE程序
- OpenCV学习笔记(二) 写入AVI视频程序
- 深入理解计算机系统学习笔记(二)之程序优化
- iOS学习笔记(二.iOS程序执行流程)
- 单片机 学习笔记(二)——简单小程序
- 编译原理学习笔记(二)翻译程序的实现
- python学习笔记(二)——程序流程控制
- Jsoup接口测试
- RPC远程过程调用
- string类中insert,find,copy的用法
- node.js的request模块
- 第六届蓝桥杯循环节长度
- 微信小程序学习笔记(二)
- jquery ajax 无刷新上传文件到servlet
- android 标准体重计算器
- 02-JZ2440裸机学习之MMU内存管理单元
- JSP创建时的<% String path = request.getContextPath();%>
- 用C语言完成对文件的定位和打印目录项以及所占簇号
- 积跬步,聚小流------html知识大纲归纳总结
- form表单 input标签以及其属性,datalist标签
- Git简明教程