小程序教程2

时间 2019-11-17

标签程序教程繁體版

原文原文链接

仿造京东小程序第一弹

因为咱们没有设计的支持，因此为了学习这个小程序的制做，咱们暂且模拟一个成熟的小程序来帮助你们快速的熟悉小程序的制做。个人教程可能写的不是很好，但愿你结合我给的demo可以更快的学会小程序，小程序地址，点击这里javascript

头部标题等样式和底部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();css
```
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:'售后订单'
},
]html
```
<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>
```
```java
如今每一个菜单都能实现跳转了，可是其中有一个不须要跳转该怎么办，能够不使用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函数的参数中获取到git