小程序开发

什么软件适合做小程序

开发者工具界面

批注 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;

路由

navigateToredirectToswitchTab

组件

视图组件

类似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";