가장 간단한 WeChat 애플릿 데모

다음은 가장 간단한 WeChat 애플릿 예제 데모입니다.
역전된 스타일, 텍스트 구성 요소, 뷰 구성 요소 및 JS 코드의 상호 작용이 사용됩니다. 누구나 WXML, JS, WXSS 및 JSON 파일의 목적과 상호 관계를 이해해야 합니다.
새 프로젝트를 생성한 다음 index.wxml 페이지에 관련 컨트롤을 생성합니다

<!--创建一个蓝色背景的View，添加点击事件,并输出启动日志-->
  <view  bindtap="bindViewTap" class="myView">
    <text class="myView-clickK">点我点我</text>
  </view>

<!--创建了一个text标签，然后执行了JS交互，通过两个大括号，在index.js中进行赋值-->
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

그런 다음 index.wxss 파일에서 컨트롤 위치와 속성 스타일을 디자인합니다. 참고:
/ **rpx 단위는 WeChat 애플릿의 CSS 크기 단위입니다. rpx는 화면 너비에 따라 조정될 수 있습니다.
지정된 화면 너비는 750rpx입니다. 예를 들어 iPhone6의 경우 화면 너비가 375px이고 총 물리적 픽셀이 750개입니다.
그러면 750rpx = 375px = 750 물리적 픽셀, 1rpx = 0.5px = 1 물리적 픽셀입니다. 개발 제안:
디자이너는 WeChat 애플릿을 개발할 때 iPhone6를 시각적 초안의 표준으로 사용할 수 있습니다. UI 디자인 도면에 대한 제안: 750px의 장치 너비를 사용하려면
디자인 초안을 사용하세요. 750px가 1rpx = 1px이면 계산하기 쉽습니다. 이 경우 디자인 도면에서 측정된
의 크기는 rpx*인 px*/
구체적인 코드는 다음과 같습니다.

.myView{
  width: 200rpx;
  height: 200rpx;
  margin-top: -100rpx;
  background-color: blue;
}
.myView {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.myView-clickK {
  margin-top: 75rpx;
  height: 50rpx;
  color: red;
}
.usermotto {
  margin-top: 100rpx;
}

해당 페이지의 대화형 함수 로직은 index.js 파일에 아래와 같이 작성됩니다.

data: {
motto: 'Hello World，你好，世界！'
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},

app.json에서 필수 설정인 탐색 스타일을 설정합니다.

효과 표시:

해당 영역의 파란색 [Click me, click me]를 클릭하면 타격을 볼 수 있으며, 그 아래에 'Hello World, Hello, World!'가 나타납니다. ' 이런 말. 이는 터치 이벤트와 해당 처리 효과의 가장 간단한 예입니다.
가장 간단한 WeChat 애플릿 데모와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!