小程序教程2

仿造京东小程序第一弹

由于我们没有设计的支持，所以为了学习这个小程序的制作，我们暂且模拟一个成熟的小程序来帮助大家快速的熟悉小程序的制作。我的教程可能写的不是很好，希望你结合我给的demo能够更快的学会小程序，小程序地址，点击这里

头部标题等样式和底部tabBar配置都是在app.json中，首先配置头部标题
现在具体介绍下app.json中都可以配置什么
- pages---是一个数组，里面放置的是页面的路径(必填)
- window---是一个配置对象，设置默认页面的窗口表现(非必填)
- tabBar---是一个对象，设置底部tab的表现(非必填)
- networkTimeout---是一个对象，设置网络超时时间(非必填)
- debug---布尔值，设置是否开启debug模式

app.json配置详解

pages,设置小程序的页面
- 接受一个数组，每一项都是一个字符串，来指定小程序由哪些页面组成。
- 每一项都是对应页面的路径+文件名信息，数组的第一项代表小程序的起始页
- 小程序新增或者减少页面都需要对这个数组进行操作
```
    {
      "pages":[
        "pages/index/index"
        "pages/logs/logs"
      ]
    }
```
window，设置小程序的状态栏、导航条、标题和窗口背景色
- navigationBarBackgroundColor---导航栏背景颜色（默认是#000000）
- navigationBarTextStyle---导航栏标题颜色（仅支持black/white）
- navigationBarTitleText---导航栏标题文字内容
- backgroundColor---窗口的背景色
- backgroundTextStyle---下拉背景字体，loading图的样式（仅支持dark/light）
- 是否开启下拉刷新（详情再后面介绍）
```
    {
      "window":{
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "仿制京东",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
      }
    }
```
tabBar，度tab应用是配置
- 通过配置tabBar来制定tab栏的表现，以及tab切换是对应的显示
- 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面，即使他是定义在tabBar中的页面，也不会显示底部的tab栏
- tabBar是一个数组，最少2个，最多5个，tab按数组顺序排序
- 属性说明
  - color---tab上的文字的默认颜色
  - selectedColor---文字选中时候的颜色
  - backgroundColor---tab背景颜色
  - borderStyle---tab上边框的颜色（值支持black/white）
  - list---tab的列表数组
    - pagePath---页面路径，必须在 pages 中先定义
    - text---tab 上按钮文字
    - iconPath---图片路径，大小显示为40kb，建议尺寸为81*81
    - selectedIconPath---选中是图片路径，大小和尺寸同上
  - position---tab栏的位置（只支持bottom和top）
```
    "tabBar": {
        "color": "#ccc",
        "selectedColor":"#0f0",
        "backgroundColor":"#567567",
        "borderStyle":"white",
        "position":"bottom",
        "list": [{
          "pagePath": "pages/index/index",
          "iconPath":"img/icon_API.png",
          "selectedIconPath":"img/icon_API_HL.png",
          "text": "搜索商品"
        }, {
          "pagePath": "pages/logs/logs",
          "iconPath":"img/wechat.png",
          "selectedIconPath":"img/wechatHL.png",
          "text": "我的订单"
        }]
    }
```
networkTimeout，可以设置各种网络请求的超时时间。
- request---wx.request的超时时间，单位毫秒，默认为：60000
- connectSocket---wx.connectSocket的超时时间，单位毫秒，默认为：60000
- uploadFile---wx.uploadFile的超时时间，单位毫秒，默认为：60000
- downloadFile---wx.downloadFile的超时时间，单位毫秒，默认为：60000
debug
- 可以在开发者工具中开启debug，在控制面板中以info信息给出
- 信息包括page注册，路由，数据更新，时间触发，帮助快速定位问题

页面的.json配置文件

每一个页面都有一个json配置文件，要比app.json全局配置文件简单的多，只能配置window的配置项，所以无需写window这个键
几乎所有的配置项都一样，除了多了一个disableScroll的布尔值，默认为false，设置为true的时候则页面整体不能滚动

外层目录结构

img文件夹存放图片
pages文件夹内放每个页面，暂时有两个一个是myOrder文件夹，另一个是searchGoods文件夹，每个文件夹下面都有.js,.json,.wxss,.wxml四个文件
util文件夹只有一个util文件，是用来格式化时间的
app.js，.app.json和app.wxss文件的作用在第一篇已经介绍

制作首页searchGood页面

用到的标签，标签详情API，请点击这里
- view，视图容器，布局常用这个标签，有如下属性
  - hover，默认为false，是否启用点击状态
  - hover-class，默认为none，指定按下去的样式类，为none是没有点击状态
  - hover-start-time，默认值为50，按住多久后出现点击状态，单位毫秒
  - hover-stay-time，手指松开多久后点击状态消失，单位毫秒
```
    <view class="section">
      <view class="section-title" hover-class="section-hover">flex-direction: row</view>
      <view class="flex-wrp" style="flex-direction:row;">
        <view class="flex-item bc-green">1</view>
        <view class="flex-item bc-red">2</view>
        <view class="flex-item bc-blue">3</view>
      </view>
    </view>
```
- image，图片，有如下属性
  - src，图片的地址，一般写相对路径
  - mode，图片裁剪、缩放方式，默认值'scaleToFill'，一共有13中模式
    - scaleToFill，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    - widthFix，宽度不变，高度自动变化，保持原图宽高比不变
    - top，不缩放图片，只显示图片的顶部区域，不一一列举，详情看官方文档
  - binderror，传一个事件，当错误发生时发送到APPService的事件名
  - bindload，传一个事件，当图片加载完后发送到APPService的事件名
```
    
    <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="图片相对路径"></image>
```
- input，输入框，有如下属性
  - value,输入框的初始内容
  - type，输入框类型，text, number, idcard, digit
  - placeholder，输入框为空是占位符等好多属性，详情看文档
- icon，图标，有如下属性
  - type，icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  - size，图标的大小，单位为像素
  - color，图标的颜色
- text，文本标签，支持转译符‘\’，text组件内只支持text标签嵌套，除了文本节点以外，其他节点都无法长按选中
  - 长按复制功能微信尚未实现
css建议添加类名之后在他自己的css文件中添加样式
每个js文件中都有一个Page实例，引入外部的js文件的时候用require引用一个相对路径，获取app.js中的app对象使用var app = getApp();
```
    Page({
      data: {
        logs: [],
        userInfo:{},
        orderData:orderData,
        dialogFlag:false
      },
      directHandle:function(event){
        console.log(event)
        if(event.target.id === '3'){
          this.setData({
            dialogFlag:true
          })
        }
      },
      dialogCancel:function(){
        this.setData({
            dialogFlag:false
          })
      },
      showDialog:function(){},
      onLoad: function () {
        wx.setNavigationBarTitle({
          title: '我的订单'
        })
        //调用全局的方法获取用户信息
        var that = this;
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
        console.log(this.data.userInfo)
      }
    })
```
- 实例中data中存放的就是这个页面需要的数据，更新数据使用this.setData({})方法,this代表的就是当前的page对象
- 生命周期钩子和页面需要的方法都定义在这个实例的对象中
- 注册程序常用钩子：onLaunch，onShow，onHide，onError，可以在object对象上自定义
- 注册页面常用钩子：onLoad，onShow，onHide等等，你可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问
- 在onload函数中我使用了wx.setNavigationBarTitle（）方法，这个就是当页面加载的时候把顶部的标题更改为“我的订单”
- app.getUserInfo这个方法是在app.js中定义的函数，上面引入app之后就可以调用了，这里是获取当前用户的信息，有头像地址，昵称，籍贯等等

制作第二个页面selfInfo

这个页面对应下方的tab栏中的我的订单
这个页面中用到的标签和上一个基本一样，只是多出了navigator标签，这是一个跳转标签，属性如下
- url，应用内的跳转链接，这是一个绝对路径类似/pages/myOrder/myOrder，而且你的路径一定是要在app.json中注册过的，
- open-type,默认为navigate，可选值为 'navigate'、'redirect'、'switchTab'，选定一个你希望的跳转类型
- hover-class，点击的时候的样式类等等
绑定数据的时候需要在page对象中的data中有这个数据，在页面中可以直接通过{{}}获取到，属性和关键字需要放在引号中的花括号中。
```
    <view> {{ message }} </view>
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })
```

如果要生成多个列表的时候，需要在data中定义一个数据数组，然后在你需要重复的标签上添加一个wx:for的属性，属性值为用花括号包起来的数据数组，每一项就是item，下标是index

    [
      {
        orderIconUrl:'../../img/pause.png',
        navUrl:'/pages/myOrder/myOrder',
        name:'全部订单'
      },
      {
        orderIconUrl:'../../img/play.png',
        navUrl:'/pages/myOrder/myOrder',
        name:'代付款'
      },
      {
        orderIconUrl:'../../img/plus.png',
        navUrl:'/pages/myOrder/myOrder',
        name:'代收款'
      },
      {
        orderIconUrl:'../../img/record.png',
        navUrl:'/pages/selfInfo/selfInfo',
        name:'售后订单'
      },
    ]

    <navigator wx:for="{{orderData}}" wx:key="navUrl" url="{{item.navUrl}}" id="{{index}}" bindtap="directHandle" open-type="navigate">
        <image class="icon" src="{{item.orderIconUrl}}"></image>
        <text>{{item.name}}</text>
        <image class="right" src="../../img/arrowright.png"></image>
    </navigator>

现在每个菜单都能实现跳转了，但是其中有一个不需要跳转该怎么办，可以不使用navigate标签，而是通过事件来控制跳转，我采用了另外一种方法，给每个标签加了一个id，然后在事件的event.target.id中可以获取到你要控制的元素的id，然后给他添加特殊的处理，同时他的跳转路径设置为当前路径。
- 这里需要说下的是navigate跳转是保留当前页面，然后跳转到应用内的某个页面，在设计的时候为了用户在使用小程序的时候不产生困扰，规定页面的路径智能是五层，而且要尽量避免多层级的交互方式。
- 使用wx:navigateTo跳转之后可以使用wx:navigateBack返回到源页面
再补充一点，就是在写页面的css的时候我们可以像我一样使用百分比等单位，但是有一个单位更值得推荐，那就是rpx，这个是微信团队做过处理和适配的，就是把所有的手机的宽度都当做750rpx，想想是不是很方便，免去了你去适配多机型的烦恼。
不好意思，我又来补充了，页面的内容可以使用模板，模板拥有自己的作用域，只能使用data传入的数据，然后通过import和include在其他页面调用或者使用template在本页面应用，涉及的内容较多，将在后续教程中详细讲解
从一个其他的页面跳转的时候，目标页面如果是tab页面则无法跳转，只能用wx.switchTab来进行跳转，url参数是一个相对路径，如果是需要到首页的话有一个更简单的方法，就是使用wx.navigateBack(OBJECT)方法直接返回，当参数delta的值大于现有页数的时候就会回到首页
在使用wx:key的时候一定要是唯一标识符，否则相同的最后一个将会覆盖第一个的值
进行跳转的时候如果使用的navigate标签进行的跳转，地址后面加的参数会在目标页面的onLoad函数的参数获取到，如果是使用wx:navigate等方法进行跳转的话，路径后面的参数会在success函数的参数中获取到

posted @ 2017-02-07 15:06 叫我MrGuang 阅读(484) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

叫我MrGuang

小程序教程2

仿造京东小程序第一弹

app.json配置详解

页面的.json配置文件

外层目录结构

制作首页searchGood页面

制作第二个页面selfInfo

公告