업무상 최근 WeChat 애플릿을 개발해야 하는데 이것이 처음으로 접하는 일이기 때문에 매우 기대되고 현재 인기 있는 애플릿을 개발해 보고 싶습니다. 위챗 팀의 신뢰에 부응하기 위해 저는 싸우기로 결심했습니다! 하지만 결국 나는 안드로이드 엔지니어입니다! 그럼 처음부터 시작해 보겠습니다!

작은 프로그램을 처음부터 시작해보세요

그래서 이 글은 프론트엔드가 아닌 엔지니어가 배우기에 매우 적합합니다! 하하! 미니 프로그램이 나오면 프론트엔드가 모바일 쪽 일자리를 빼앗아 간다고 하는데, 제가 아는 한 지금 공부하고 있는 분들 중에는 모바일 개발 엔지니어 분들도 많고, 누가 누구를 잡을지는 확실하지 않습니다!
PS: 미니 프로그램의 내부 테스트 자격을 어떻게 얻었는지 물었습니다. 내부 리소스라는 것이 있습니다!

준비

IDE 구축
지식 준비
처음부터 시작
app.js
app.json
app.wxml
app.wxss
Hello World
프로그램 인스턴스 생성
Beautify ActionBar
Beautify 페이지
홈페이지 구성
Super Hello World
이벤트 바인딩 기능
인터페이스 데이터 업데이트

준비

IDE 빌딩

베타 코드가 없으면 크랙된 버전을 다운로드하면 됩니다. 충분히 배웠습니다. ! IDE 크랙 버전 + 설치 튜토리얼

지식 준비

JavaScript를 계속 읽어야 합니다. 추천 튜토리얼 Liao Xuefeng의 블로그
HTML+CSS 용도만 알면 됩니다

처음부터 시작

WeChat small 프로그램에는 네 가지 유형의 파일이 있습니다

js ---------- JavaScript 파일

json -------- 프로젝트 구성 파일, 담당 창 색상 잠깐

wxml ------- HTML 파일과 유사

wxss ------- CSS 파일과 유사

사용 루트 디렉터리에 app으로 명명된 이 네 가지 유형의 파일은 프로그램 항목 파일입니다.

app.json

이 파일이 있어야 합니다. 해당 파일이 없으면 WeChat 프레임워크가 이 파일을 구성 파일 항목으로 사용하므로 IDE에서 오류를 보고합니다.
이 파일을 만들고 중괄호만 작성하면 됩니다. in it
나중에 하도록 하겠습니다. 전체 애플릿의 전역 구성은 다음과 같습니다. 페이지 구성을 기록하고, 미니 프로그램의 창 배경색을 설정하고, 네비게이션 바 스타일을 설정하고, 기본 제목을 설정합니다.

app.js

이 파일이 있어야 합니다. 그렇지 않으면 오류가 보고됩니다! 하지만 이 파일만 생성하면 아무것도 작성할 필요가 없습니다. 앞으로는 이 파일에서 미니 프로그램의 수명 주기 기능을 모니터링하고 처리하고 전역 변수를 선언할 수 있습니다.

app.wxss

이 파일은 필요하지 않습니다. 전역 CSS 스타일 파일이기 때문에

app.wxml

필요하지도 않고 메인 인터페이스를 의미하는 것도 아닙니다~미니 프로그램의 메인 페이지는 JSON 파일의 구성에 따라 결정되기 때문입니다

예 이 두 파일 없이 프로그램을 실행하면 IDE는 오류를 보고하지 않습니다. 이는 또한 이것이 가장 간단한 WeChat 애플릿임을 의미합니다

Paste_Image.png

Hello World

프로그램 인스턴스 만들기

app.js 파일은 전체 프로그램의 라이프사이클을 관리하므로 다음 코드를 추가합니다. (App IDE에 들어가면 프롬프트가 표시됩니다.)

App({
  onLaunch: function () {
    console.log(&#39;App Launch&#39;)
  },
  onShow: function () {
    console.log(&#39;App Show&#39;)
  },
  onHide: function () {
    console.log(&#39;App Hide&#39;)
  }
})

로그인 후 복사

구체적인 API는 다음과 같습니다

ActionBar 꾸미기

json 파일은 ActionBar 색상 구성을 담당합니다. 내부에 다음 코드를 추가하면 됩니다. 매개변수는 아래 그림에 설명되어 있습니다!

{
    "window":{
        "navigationBarBackgroundColor": "#BBDEF8",
        "navigationBarTitleText": "Demo",
        "navigationBarTextStyle":"white"
    }
}

로그인 후 복사

이제 ActionBar가 이렇게 생겼는지 확인해 보세요! 자, 계속해서 첫 번째 인터페이스를 작성해 봅시다

페이지를 아름답게 합니다

페이지를 아름답게 하기 위해 wxml과 wxss 파일을 사용했습니다

프로그램 코드 구조를 단순하게 유지하기 위해
폴더에 임의의 이름을 가진 새 폴더를 만들어야 합니다. 여기를 페이지라고 부르세요
그런 다음 임의의 이름으로 페이지 폴더에 새 폴더를 만듭니다. 여기서는 index라고 합니다. 그런 다음 index.wxml 파일을 만들고 그 안에 다음 코드를 작성합니다.

<view>
    <text class="window">Hello</text>
</view>

로그인 후 복사

index.wxss 파일에 다음 내용을 작성합니다 Code

.window{
  color=#4995fa;
}

로그인 후 복사

그런 다음 index.js 파일을 만듭니다

파일에 다음 코드를 입력합니다(Page IDE에 들어가면 메시지가 표시됩니다)

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

로그인 후 복사

함수는 다음과 같이 설명됩니다.

配置首页

Json文件负责配置页面路径
所以我们在里面加入如下代码
其中index的含义其实就是指index.js文件
这里需要说明一点 pages 里面的路径其实是指向js文件的
如果一个目录下没有该名称的js文件是会报错的！

"pages":[
  "pages/index/index"
],

로그인 후 복사

完成了！我们来运行程序！

超级Hello World

为了学习事件绑定，以及如何将数据在页面上更新
我们来做个超级Hello World，就是我点击文字，能让
它变色！

绑定事件

我们打开index.wxml 将里面代码改成这样

<view>
    <text catchtap="click" class="window">Hello</text>
</view>

로그인 후 복사

其实也就是加了

catchtap="click"

这两个属性是什么意思呢别着急我会一一解释

上图展示了事件的一些的属性名称，这里需要注意红框标注起来的内容，区分出冒泡事件和非冒泡事件，其实冒泡事件就是需要往上面一层容器传递这个事件。

看了这图我们再来看 catchtap="click" 的含义
catch 代表非冒泡事件
tap 代表点击事件
所以连在一起就是非冒泡点击事件
那后面那个click是啥
click 其实只是个变量名字
我们在index.js需要用这个名字绑定接收事件的函数
我们打开index.js
然后添加如下函数

  click:function(){
    console.log("点击了文字");
  },

로그인 후 복사

添加完后代码长这样红框中就是添加的这个代码

所以其实点击事件的回调函数就是 catchtap="click"
中的 click 后面加上 :function() 构成的
现在我们来运行程序试试然后点击文字

看是不是调用了 click:function 函数并且打出了log

好接下来我们写点击一下变色的逻辑
那如何让一个文字变色呢，当然是css
所以我们需要再index.wxss 中添加一个样式

.window-red{
    color:#D23933;
}

로그인 후 복사

然后我们进入index.js文件
你会发现代码里面有个 data:{} 它不是page生命周期函数
其实他是个变量的数组，这个里面申请的变量都可以在 wxml中使用

我们在这里申请一个color

color的值就是index.wxss中的样式名称
然后进入index.wxml中,将class中的值改成 {{color}}

其实意思就是将js文件中变量 color的值在这里使用
也就是值等于 window
然后我们再回到index.js文件
在最上面申请一个变量控制点击
然后在click:function() 函数中添加如下代码

 click:function(){
    console.log("点击了文字");
      if(flag){
        color = "window-red";
        flag = false;
      }else{
        color = "window";
        flag = true;
      }
      this.setData({
        color
      });
  },

로그인 후 복사

修改完后的代码如图