小程序总结

(一)小程序集成Bmob作为数据存储
(二)小程序中Flex布局
(三)小程序使用高德地图获取地理位置
(四)小程序列表条目点击
(五)小程序下拉刷新、上拉加载
(六)小程序总结这里写图片描述

一、小程序的主体部分由app.js、app.json、app.wxss三个文件组成,放在根目录

(1)app.js 可以监听并处理小程序的生命周期、声明全局变量。其余的.js文 件可以通过var app = getApp() 获取其实例,调用其中定义的方法和变量,但不可以调用生命周期的方法。
(2)app.json 是小程序的全局配置。

  pages 配置小程序的组成页面,第一个代表小程序的初始页面
  window  设置小程序的状态栏、标题栏、导航条、窗口背景颜色
  tabBar  配置小程序tab栏的样式和对应的页面

(3)app.wxss 是小程序的公共样式表,可以在其他.wxss文件中直接使用

二、pages文件夹里是小程序的各个页面,每个界面一般都由.wxml、.wxss、.js、.json四个文件组成,四个文件必须是相同的名字和路径

(1) .js 是页面的脚本代码,通过Page()函数注册页面。可以指定页面的初始数据、生命周期、事件处理等
(2) .wxml 是页面的布局文件,只能使用微信定义的组件
(3) .wxss 是样式表,需要注意

  • 尺寸单位:rpx 可以根据屏幕的宽带进行自适应
  • 样式导入:@import导入外联样式表,如:@import "test.wxss";
  • 定义在app.wxss中的全局样式,作用于每个页面。定义在page的.wxss文件只作用于对应的页面,会覆盖app.wxss中相同的选择器。
    (4) .json 是页面的配置文件,只能设置app.json中的window配置内容,会覆盖app.json中window的相同配置项,即使不配置任何东西也需要写{},否则会报错。
三、utils 里面包含一些公共的代码抽取的js文件,作为模块方便使用。模块通过module.exports对外暴露接口。
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

其他地方使用是var utils = require('../../utils/util.js');进行引用

四、数据绑定

.wxml 中的动态数据都来自Page中的data。数据绑定使用数据绑定使用双大括号将变量包起来,可以作用于内容、组件属性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)。

Page({
    data: {
        message: "Hello",
        id:0,
        status: true
    }
})
<view> {{message}} </view>
<view id="item-{{id}}"> </view>
<view wx:if="{{status}}"> </view>
<view hidden="{{status}}"> </checkbox>

还可以进行简单的运算在{{ }}里

<view hidden="{{status ? true : false}}"> Hidden </view>
<view> {{a + b}} + c </view> 
<view wx:if="{{num > 6}}"> </view>
<view>{{"hello" + word}}</view>
五、条件渲染

用 wx:if="{{status}}"来判断是否渲染代码块

<view wx:if="{{status}}"> isShow </view>

还可以添加else块

<view wx:if="{{num > 5}}"> A </view>
<view wx:elif="{{num > 2}}"> B </view>
<view wx:else> C </view>
六、列表渲染

在组件上使用 wx:for属性绑定一个数组,就可以渲染组件了
默认情况下数组的当前下标变量名为index,当前项的变量名为item

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

Page({
  data: {
    array: ["AA","BB","CC"]
  }
})
使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="num" wx:for-item="itemName">
  {{num}}: {{itemName}}
</view>
七、小程序页面跳转以及传值
    <view class='address' bindtap='addrssOnclick'>

  • wx.navigateTo()
addrssOnclick: function () {
                wx.navigateTo({
                url: '../../pages/address/address'
              })
  • wx.redirectTo()
addrssOnclick: function () {
                wx.redirectTo({
                url: '../../pages/address/address'
              })

wx.navigateTo()是保留当前页面,跳转到某个页面,跳转页面后可以返回上一页。
wx.redirectTo()是关闭当前页面,跳转到某个页面,跳转页面后不能返回上一页。

  • navigator 元素跳转
<navigator url='../../pages/address/address'>address</navigator>

  • 传值
    只需要在路径后面,添加 ?后面接参数,以key-value的方式。
addrssOnclick: function () {
                wx.redirectTo({
                url: '../../pages/address/address?id=1'
              })

然后在address.js 中的 onLoad() 函数中得值:

onLoad: function (options) {
  console.log(options.id);
}
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值