小程序开发

什么软件适合做小程序

开发者工具界面

批注 2020-02-09 155239

目录结构

文件 必填 作用
app.js 是 小程序逻辑
app.json 是 小程序公共设置
app.wxss 否 小程序公共样式表
文件类型 必填 作用
js 是 页面逻辑 ( 微信小程序没有window和document对象 )
wxml 是 页面结构 ( WeiXin Markup Language，不是HTML语法 )
wxss 否 页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位，微信专属响应式像素 )
json 否 页面配置

分包

移动设备的分辨率与rpx

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

配置

组件

页面注册

生命周期

Page({
    // 启动页面后弹出消息
    onLoad: function () {
        wx.showToast({
        title: '鸡你太美',
        });
    }
})

视图

数据绑定

在小程序中，在js的data中定义变量

Page({

  // ..
  data: {
    msg: 'msg'
  }
  //...

可以在WXML中进行绑定，跟VUE一样，但是需要注意的是，这种绑定是单向绑定

{% raw %}

<view>{{message}}</view>

需要使用setData来设置或者更新数据

this.setData({msg:'abc'});

更复杂的用法

<!-- 绑定属性（需要在双引号内） -->
<view id="item-{{id}}"> </view>
<!-- 运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view> 
<view wx:else="{{view == 'MINA'}}">MINA</view>

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

事件

在WXML中绑定事件

<view class="moto-container" bind:tap="onTap">
</view>

Page({
  onTap(){
    console.log('hello')
  }
})

bind与catch

bind是冒泡，事件会往上传递

catch会阻止事件向上冒泡

模块化

function method1(){
  console.log("123");
}
module.exports.method1 = method1;

const common = require('common.js')

模板template

<template name="staffName"> 
    <view>FirstName: {{firstName}}, LastName: {{lastName}}</view> 
</template> 

<import src="item.wxml" />

<!--           模板名           传入的对象  -->
<template is="staffName" data="{{staffA}}"></template>

{% endraw %}

页面间参数传递

wx.navigateTo({
    url: './post-detail/post-detail?id='+id,
})

  onLoad: function (options) {
    // 这里可以拿到url的参数
    console.log(options.id);
  },

缓存

// 设置缓存
wx.setStorage({
     key: '',
     data: '',
})
// 获取缓存
wx.getStorage({
      key: ,
      success: function(res) {},
    })

全局变量

App({
  globalData: {
    flag:false
  }
  //...
}

var app =getApp();
app.globalData.flag= true;

路由

navigateTo
redirectTo
switchTab

组件

视图组件

类似div

基础组件

<icon type="success"></icon>
<icon type="search"></icon>

<text>一段文本</text>

表单组件

<button size='default'>默认尺寸按钮</button>

场景值

视图层

WXML

import 的依赖无法传递

<include src="header.wxml" />

WXSS

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应

@import "common.wxss";