微信小程序入门学习 -

李大宝

浏览: 14630 次
性别:
来自: 北京

最近访客更多访客>>

fengyuyaoye

xiaolan02

wj_zcy_hfh

desfirefly

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

微信小程序入门学习

博客分类：

小程序

小程序入门学习

小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件            必填     作用
app.js          是       小程序逻辑
app.json 	是       小程序公共设置
app.wxss 	否       小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型      必填     作用
js 	      是       页面逻辑
wxml 	      是       页面结构
wxss 	      否       页面样式表
json 	      否       页面配置

注意：为了方便开发者减少配置项，我们规定描述页面的这四个文件必须具有相同的路径与文件名

配置
app.json 文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的简单配置app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

app.json 配置项列表

属性              类型                  必填            描述
pages 	          StringArray           是              设置页面路径
window            Object                否              设置默认页面的窗口表现
tabBar            Object                否              设置底部 tab 的表现
networkTimeout 	  Object                否              设置网络超时时间
debug             Boolean               否              设置是否开启 debug 模式

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

如开发目录为：

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

则，我们需要在 app.json 中写

{
  "pages":[
    "pages/index/index"
    "pages/logs/logs"
  ]
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

navigationBarBackgroundColor 	   HexColor   #000000 	  导航栏背景颜色，如"#000000"
navigationBarTextStyle 	           String     white 	  导航栏标题颜色，仅支持 black/white
navigationBarTitleText 	           String                  导航栏标题文字内容
backgroundColor 	           HexColor   #ffffff 	   窗口的背景色
backgroundTextStyle 	           String 	dark 	    下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh 	          Booleanfalse              是否开启下拉刷新

注：HexColor（十六进制颜色值），如"#ff00ff"

如 app.json ：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar

如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar 配置中的页面，也不会显示底部的 tab 栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

属性             类型            必填        默认值               描述
color           HexColor         是 		               tab 上的文字默认颜色
selectedColor 	HexColor         是 		               tab 上的文字选中时的颜色
backgroundColor HexColor         是 		               tab 的背景色
borderStyle 	String           否 	    black 	       tabbar上边框的颜色，仅支持 black/white
list            Array            是 		               tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position 	String           否 	    bottom 	       可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性                 类型                  必填      说明
pagePath 	    String                 是        页面路径，必须在 pages 中先定义
text 	            String                 是 	     tab 上按钮文字
iconPath 	    String                 是        图片路径，icon 大小限制为40kb
selectedIconPath    String                 是        选中时的图片路径，icon 大小限制为40kb

networkTimeout

设置各种网络请求的超时时间。

属性说明：

属性             类型             必填            说明
request 	Number            否 	          wx.request的超时时间，单位毫秒，默认为：60000
connectSocket 	Number            否 	          wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile 	Number            否 	          wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile 	Number            否 	          wx.downloadFile的超时时间，单位毫秒，默认为：60000

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：

属性类型默认值描述
navigationBarBackgroundColor 	HexColor         #000000 	导航栏背景颜色，如"#000000"
navigationBarTextStyle 	        String 	        white 	        导航栏标题颜色，仅支持 black/white
navigationBarTitleText 	        String                          导航栏标题文字内容
backgroundColor 	        HexColor        #ffffff 	窗口的背景色
backgroundTextStyle 	        String 	        dark 	        下拉背景字体、loading 图的样式，仅支持 dark/light
enablePullDownRefresh 	        Boolean         false            是否开启下拉刷新，详见页面相关事件处理函数。
disableScroll 	                Boolean         false            设置为true则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项

如

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

底部导航修改步骤

1、制作图标并保存到项目(在项目下创建imgs文件夹保存图标文件)

|_ imgs
    |_ icon_1.png
    |_ icon_2.png

2、修改app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "imgs/icon_1.png",
      "selectedIconPath": "imgs/icon_1.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "imgs/icon_2.png",
      "selectedIconPath": "imgs/icon_2.png"
    }]
  }
}

注册程序 App()

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
object参数说明：

属性类型描述触发时机

onLaunch        Function生命周期函数--监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow          Function生命周期函数--监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow
onHide          Function生命周期函数--监听小程序隐藏当小程序从前台进入后台，会触发 onHide
onError         Function错误监听函数当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息其他Any开发者可以添加任意的函数或数据到Object参数中，用this可以访问

前台、后台定义：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

示例：

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {      // Do something when show.
  },
  onHide: function() {      // Do something when hide.
  },
  onError: function(msg) {    console.log(msg)
  },
  globalData: 'I am global data'
})

getApp()

小程序提供了全局的 getApp() 函数，可以获取到小程序实例。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：

App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

注册页面 Page()

Page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等
object参数说明：
属性               类型                   描述
data               Object                 页面的初始数据    
onLoad             Function               生命周期函数--监听页面加载    
onReady            Function               生命周期函数--监听页面初次渲染完成
onShow             Function               生命周期函数--监听页面显示    
onHide             Function               生命周期函数--监听页面隐藏
onUnload           Function               生命周期函数--监听页面卸载
onPullDownRefresh  Function               页面相关事件处理函数--监听用户下拉动作    
onReachBottom      Function               页面上拉触底事件的处理函数    
onShareAppMessage  Function               用户点击右上角分享其他Any开发者可以添加任意的函数或数据到object参数中，在页面的函数中用this可以访问

初始化数据

初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。
示例代码：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期函数说明

onLoad: 页面加载
一个页面只会调用一次。
接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 页面显示
每次打开页面都会调用一次。

onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onHide: 页面隐藏
当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
页面相关事件处理函数

onPullDownRefresh: 下拉刷新
监听用户下拉刷新事件。
需要在config的window选项中开启enablePullDownRefresh。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onShareAppMessage: 用户分享
只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮
用户点击分享按钮的时候会调用
此事件需要 return 一个 Object，用于自定义分享内容
分享设置演示

Page({
  ......,
  onShareAppMessage: function () {
    return {
      title: '自定义分享标题',
      desc: '自定义分享描述',
      path: '/page/user?id=123'
    }
  }
})

事件处理函数
除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。
示例代码：

<view bindtap="viewTap"> click me </view>
Page({
  viewTap: function() {
    wx.showToast({title:'hi'});
  }
})

Page.prototype.setData()

setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
注意：
直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
setData() 参数格式
接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

示例代码：

Page({
    data:{
        "text1":"hi"
    },
    myfunc : function(){
        //wx.showToast({title:'hi'});
        this.setData({"text1":"hi......"});
    }
});

页面跳转

wx.navigateTo({
    url: "../logs/logs"
})

文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。
通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：

// app.js
App({
  globalData:{
    appName :'hcoder'
  }
})
// page.js
var app = getApp();
Page({
    data:{},
    myfunc : function(){
        //wx.showToast({title:'hi'});
        this.setData({"text1":"hi......"});
    },
    onLoad: function(){
        this.setData({'appName':app.globalData.appName});
    }
});

模块化（js引用）
我们可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
需要注意的是：
exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用 module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。

示例 :

//common.js
function toast(msg){
    wx.showToast({title:msg});
}
module.exports.toast = toast;
//页面调用
var app = getApp();
var common = require('../../common.js');
Page({
    data:{
    },
    myfunc : function(){
        common.toast('ok');
        this.setData({"text1":"hi......"});
    },
    onLoad: function(){
        this.setData({'appName':app.globalData.appName});
    }
});

分享到：