• 目录结构
  • 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.js
App({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'}}">WEBVIEWview>
<view wx:elif="{{view=='APP'}}">APPview>
<view wx:else="{{view=='MINA'}}">MINAview>

test.js中代码

Page({data:{view:'MINA'},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭}
})

效果如图(5):

END

小程序的开发基础基本就这些了，下次开始讲主要的组件的使用吧。

同系列文章目录

微信小程序学习笔记（一）——小程序的快速搭建与入门
微信小程序学习笔记（三）——小程序简单组件的使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！