소규모 프로그램 개발 경험 요약-미니 프로그램 개발-php.cn

소규모 프로그램 개발 경험 요약

hzc

풀어 주다： 2020-06-15 10:20:50

앞으로

3249명이 탐색했습니다.

1. WXML

1.1: wx:if 및 wx:else

프런트엔드는 백엔드 인터페이스를 통해 정보 목록을 가져오고, 그렇지 않으면 데이터 내용이 표시됩니다. 정보를 찾을 수 없습니다. if-else가 부울 값을 사용하여 이 전환을 수행하는 경우 페이지는 먼저 false 상태로 표시된 다음 true로 업데이트됩니다. 즉, 정보를 찾을 수 없다는 내용이 깜박입니다. 이런 종류의 상호 작용은 없습니다. 매우 이상적입니다.

<view wx:if="{{true}}">
	<text>这是信息列表</text>
</view>
<view wx:else>
	<text>找不到信息</text>
</view>

로그인 후 복사

가장 좋은 방법은 다음을 사용하는 것입니다.

data:{
    info:null
}

로그인 후 복사

<view wx:if="{{info === 1}}">
	<text>这是信息列表</text>
</view>
<view wx:if="{{info === 0}}">
	<text>找不到信息</text>
</view>

로그인 후 복사

1.2: wx:for

For 루프에 wx:for-item="item" wx:key="를 추가하세요. item"

1.3: 블록 태그

wx:if, wx:for, wx:else, 스타일 의미가 없는 이러한 구문은 블록을 사용해 보세요

1.4: 템플릿 구성 요소 template

공개 페이지 모듈/ 구성 요소는 wxml에서 직접 사용할 수도 있고 import 방법을 사용할 수도 있습니다. CSS가 포함된 경우 wxss의 @import를 통해 도입해야 합니다.

/**
* 方式一：直接使用
* 1. 给template 设置name属性
* 2. 组件传过来的值可以直接使用  hidden="{{!isloading}}"
*/
<template name="loading">
  <view class="weui-loadmore" hidden="{{!isloading}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view> 
</template>

/** 
* 方式二：按路役引入 
* 1. is 等同方式一的name
* 2. data="{{isloading}}" 给template的数据
*/
<import src="../template/loading.wxml"/>
<template is="loading" data="{{isloading}}"></template>

로그인 후 복사

1.5: 스크립팅 언어 wxs

는 wxml 페이지에서 특별히 실행되는 스크립팅 언어입니다. javascript와 달리 ES6 구문 사용을 지원하지 않으며 js를 참조할 수 없습니다.

<wxs module="wxs" src="../../utils/wxs.wxs"></wxs>

로그인 후 복사

module.exports = {
	//输出百分比
	formatProgress: function (c,m) {
		return c/m*100
	}
}

로그인 후 복사

2. WXSS

2.1: 배경 아이콘

애플릿의 배경에서는 전체 https 이미지 경로만 사용할 수 있습니다. 프로젝트에서 아이콘을 사용하는 방법:

Vector svg. : 완벽한 확장성, 쉬운 조정(색상, 크기 등)
data-uri: 이미지 크기는 base64를 사용하여 20Kb 미만입니다. [프론트엔드 이미지 도입 최적의 방법 분석][segmentfault.com/a/119000001…]
대용량 파일: wxml에서 직접 이미지 태그 사용
외부 아이콘 도입: 알리바바 벡터 라이브러리 등 , 네트워크 경로를 사용하고 로컬 방법으로 다운로드하여 사용할 수 있습니다.

2.2: 스타일 재설정

2.3: 글꼴 계열 표준 사양

font-family: 
/*西文：*/
-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,
/*中文：*/
PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;

로그인 후 복사

2.4: rpx 단위의 합리적인 사용

rpx는 화면 너비의 백분율에 해당하는 상대 단위입니다. , 다음과 같이 사용하지 않는 것이 좋습니다:
font-size 및 border-width; 애니메이션 애니메이션에는 변위 변환이 포함됩니다. 일부 기계에서 rpx를 px로 변환할 때 262.89px와 같이 소수점이 있는 경우 WeChat은 값을 하향 조정합니다. 262px로 변경하면 1px 간격이 발생합니다.
QR 코드, 사진 공유 등 캔버스 그리기

3. JavaScript

3.1: wx.request 메소드의 보조 캡슐화

3.2: 페이지 수명 주기

onLoad: 페이지는 한 번만 호출됩니다. 페이지 매개변수 옵션을 얻을 수 있습니다.
onShow: 페이지 표시, 페이지가 열릴 때마다 호출되고 배경에서 전경으로 전환할 때 한 번 호출됩니다. 전화기는 꺼진 화면에서 디스플레이 화면으로, 최소화에서 최대화로 전환됩니다.
onReady: 페이지의 초기 렌더링이 완료되었습니다. 이는 페이지가 준비되었으며 뷰 레이어와 상호 작용할 수 있음을 의미합니다.
onHide: 페이지가 배경, NavigateTo 또는 탭 전환으로 전환될 때 호출됩니다.
onUnload: 페이지를 언로드하는 중입니다. 페이지가 닫혀 있거나 메모리가 부족하면 페이지를 적극적으로 삭제합니다.

3.3: 새로운 날짜 호환성

Android에서 인식 가능new Date("2018-05-30 00:00:00")格式，但在IOS只能识别2018/05/30 00:00:00格式。需要将短横替换为斜杠。var iosDate= date.replace(/-/g, '/')。

3.4: 버블링 이벤트