前言

作者本人是一名Android开发者,前端开发知识了解不多,小程序正式发布之后,好奇心的驱使下,作为一个闲不住的IT男(当然还有boss的要求),自然是要撸一撸小程序的,下面记录下我初入小程序过程中的一些心得和知识点

开发工具

小程序的开发工具可以有多种选择,这里推荐两个:

• 官方IDE
• EgretWing

官方IDE调试方便,但代码提示很差,EgretWing这个工具最新版本支持小程序,代码提示会比较全面,但是只能预览静态页面,无法调试和运行动态数据(也可能是我不太会用),放一张截图

小程序的文件结构

小程序整体包含两个部分

app全局

• app.js 全局逻辑和生命周期处理
• app.json 全局配置
• app.wxss 全局公共样式

page页面

• js 页面逻辑
• wxml 页面布局
• wxss 页面样式表
• json 页面配置

文件类型总共就只有js wxml wxss json四种,简单明了

注意:

• 任意页面必须有.js和.wxml
• 同一页面的文件需要在同一文件夹下,且文件名相同(仅文件类型不同)
• 使用EgretWing会生成一些ide的配置文件,无需理会

配置

小程序配置使用.json文件

//app.json
{
  "pages": [//指定所有页面路径
    "pages/index/index",
    "pages/logs/logs",
    "pages/info/info"
  ],
  "window": {
    "enablePullDownRefresh": true,//全局支持下拉事件
    "backgroundTextStyle": "dark",//窗口背景色
    "navigationBarBackgroundColor": "#000",//导航栏背景色
    "navigationBarTitleText": "WeChat",//导航栏title
    "navigationBarTextStyle": "white"//导航栏字体颜色
  }
}

//index.json
{
    "navigationBarTitleText": "小程序",
    "enablePullDownRefresh": true
}

• 所有页面必须在app.json中的pages节点下注册,路径为全路径
• page.json只支持window节点下的属性
• page.json在实际页面中会覆盖app.json中的同属性
• .json文件中不允许任何形式的注释(上面代码是个错误示范2333)

生命周期

App生命周期

• onLaunch()当小程序初始化完成时，会触发onLaunch（注意全局只触发一次）
• onShow()当小程序启动，或从后台进入前台显示，会触发onShow
• onHide()当小程序从前台进入后台，会触发onHide

page生命周期

• data 页面的初始数据
• onLoad 生命周期函数--监听页面
• onReady 生命周期函数--监听页面初次渲染完成
• onShow 生命周期函数--监听页面显示
• onHide 生命周期函数--监听页面隐藏
• onUnload 生命周期函数--监听页面卸载
• onPullDownRefresh 页面相关事件处理函数--监听用户下拉动
• onReachBottom 页面上拉触底事件的处理函数

其中使用比较多的onLaunch()用来初始化一些全局数据,page.onLoad加载页面数据,onPullDownRefresh和onReachBottom处理列表数据

页面布局

页面布局使用wxml和wxss配和使用,可以使用class和style引入样式

基础

//wxml
<view class="container">
  <image src="{{imageUrl}}" class="image" mode="aspectFill"></image>
  <view class="msg">
    <text class="text">描述: {{title}}</text>
    <text class="text">来源: {{source}}</text>
    <text class="text">类型: {{resType}}</text>
  </view>
</view>

//wxss
.image {
  width: 100%;
  height: 60vw;
}

.msg {
  width: 100%;
  padding: 10px;
}

.text {
  display: block;
}

数据绑定

小程序中视图层与逻辑层的关联方式全部都是数据绑定,这与Android开发完全不同,没有FindViewById,没有view.setXxx()方法,一开始会不习惯这种方式

//wxml
<text class="text">描述: {{title}}</text>
//js
data: {
    title: 'this is title'
}

如果需要更新text,则使用setData()方法

that.setData({
    title:"呵呵"
})

• 为什么不直接使用this.setData(),是因为上下文对象不同,后面实际开发中会提到

wx:for

重复渲染组件,用于列表或轮播图(注意:wxml中没有直接提供列表组件)

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

• 其中默认指定index为下标,item为当前项
• {{}}双括号内表示引用data中的数据
• wx:for="{{items}} 会重复渲染items数组长度个数的view区块,从而形成列表

wx:if

条件渲染,其实就是提前给个条件,满足条件时才会展示这个view,基本等同于hidden属性,具体差异可以查看官方文档

逻辑处理

网络请求

wx.request({
  url: 'http://gank.io/api/data/福利/10/1'
  data: {},//请求参数key:value形式
  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  header: {}, // 设置请求的 header
  success: function (res) {
    console.log("请求成功" + res)
  },
  fail: function () {//失败

  },
  complete: function () {//完成

  }
})

• 请求协议为https
• 最多只能并行执行5个请求
• header中可以指定Content-Type

数据绑定与更新

使用app或page下的data存储数据,wxml组件绑定data中的数据,数据有更新时使用setData()更新数据并刷新界面

//wxml
<view class="container">
  <image src="{{imageUrl}}" class="image" mode="aspectFill"></image>
  <view class="msg">
    <text class="text">描述: {{title}}</text>
    <text class="text">来源: {{source}}</text>
    <text class="text">类型: {{resType}}</text>
  </view>
</view>

//js
Page({
    data: {//定义数据,用于组件绑定数据
        title: '',
        imageUrl: '',
        resType: '',
        source: ''
    },
    onLoad: function (res) {//取值
        this.setData({//更新数据并刷新绑定了这些数据的组件
            title: res.title,
            imageUrl: res.imageUrl,
            resType: res.resType,
            source: res.source,
        })
    }
})

点击事件

点击事件使用bindtap属性,用来指定一个函数处理该事件,参数为event

<view class="item-text" bindtap="itemClick">
//js
bindViewTap: function (event) {
  wx.navigateTo({
    url: '../logs/logs'
  })
},

• 如果需要处理列表中item的点击事件,则需要知道当前的index,即事件传值,后面会具体说道
• 除了点击,还要一些其他的事件,具体可以查看官方文档

这篇就到这里了,下一篇将开发具体Demo加以记录分享出来,轮播,列表的实现,刷新+分页,点击传值跳转等.

关于作者

• 简 书:uncochen
• github:ChenZhen