> 위챗 애플릿 > 미니 프로그램 개발 > 소규모 프로그램 개발의 간단한 예를 자세히 설명

소규모 프로그램 개발의 간단한 예를 자세히 설명

Y2J
풀어 주다: 2017-05-11 13:36:14
원래의
2783명이 탐색했습니다.

본 글은 위챗 애플릿(어플리케이션 계정)의 간단한 예시 애플리케이션 관련 정보를 주로 소개합니다. 도움이 필요한 친구는

데모 미리보기

데모 영상(교통 경고 2.64MB)

GitHub Repo 주소

창고 주소: github.com/ zce/weapp-demo


단계를 사용하여 저장소를 로컬로 복제합니다.


bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --깊이 1 $ cd weapp-douban

WeChat 웹 오프너 도구를 엽니다(참고: 0.9.092300이어야 함). 버전)


버전은 0.9.092300이어야 합니다. 이전 버전은 정상적인 작동을 보장할 수 없습니다


소위 크래킹이 필요하지 않습니다. 인터넷은 이전 0.9 버전 092100에만 해당됩니다. 새 공식 버전은 크랙할 필요가 없으며 크랙할 필요도 없습니다.


다운로드 링크(공식 버전, 안심하고 다운로드): https://pan.baidu.com/s/1qYld6Vi


wechat_web_devtools_0.9.092300_x64.exe(Windows 64비트)

wechat_web_devtools_0.9.092300_ia32.exe(Windows 32비트)
wechat_web_devtools_0.9.092300.dmg(macOS)

1. 항목 추가를 선택하세요. 해당 정보


AppID: 오른쪽 하단 No AppID 클릭 (자격이 없습니다. 이번에 200곳은 샤오롱이 직접 뽑았다고 합니다)

프로젝트 이름: 배포와 관련이 없으므로 상관없습니다.
프로젝트 디렉터리: 방금 복제한 폴더 선택
프로젝트 추가를 클릭하세요

새해 복 많이 받으세요


WeChat Web Opener 도구에서 코딩하도록 선택할 수 있습니다(또는 좋아하는

편집기를 선택할 수 있습니다). )

1. 왼쪽 하단에 있는 다시 시작

버튼을 사용하여 인코딩된 미리 보기를 새로 고칩니다

2. Bash 사용자는 프로젝트 디렉터리에서 다음 명령을 실행하여 새 구성 요소에 필요한 파일을 빠르게 생성할 수 있습니다:

bash $ ./generate page <new-page -name> # 또는 $ ./generate 컴포넌트

나머지는 무료로 플레이할 수 있습니다.

WeChat 애플릿에 대한 기본 튜토리얼(지속적으로

업데이트됨) )

프로젝트 폴더 생성 및 기본 필수 파일 생성


app.js

项目主入口文件(用于创建应用程序对象)

// App函数是一个全局函数,用于创建应用程序对象
App({
 // ========== 全局数据对象(整个应用程序共享) ==========
 globalData: { ... },

 // ========== 应用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 应用程序启动时触发一次
 onLaunch () { ... },

 // 当应用程序进入前台显示状态时触发
 onShow () { ... },

 // 当应用程序进入后台状态时触发
 onHide () { ... }
})
로그인 후 복사

app.json

프로젝트 구성 선언 파일(

탐색바 등 프로젝트의 일부 정보 지정) 스타일 색상 등)

{
 // 当前程序是由哪些页面组成的(第一项默认为初始页面)
 // 所有使用到的组件或页面都必须在此体现
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
 "pages": [ ... ],
 // 应用程序窗口设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
 "window": { ... },
 // 应用导航栏设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
 "tabBar": { ... },
 // 网络超时设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制台输出调试信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}
로그인 후 복사

app.wxss

[!Optional!] 프로젝트 전역 스타일 파일, 내용은 다음과 같습니다. CSS 표준 구문

페이지 구성 요소 생성


각 페이지 구성 요소는

  1. page-name.js

  2. 페이지 수명 주기 제어 및 데이터 처리를 처리하는 데 사용되는 페이지 논리 파일
  3. 계속...
  4. page-name.json
  5. 현재 페이지 설정 직장의 일부 구성
  6. 여기에서 창 설정을 재정의할 수 있습니다 app.json
  7. 즉, 익숙한 창에서만 설정이 가능합니다
  8. 계속...
  9. page-name.wxml
  10. wxml은 Wei Xin 마크업 언어
  11. 를 참조합니다.
  12. 구문은 HTML 구문이 아닌 XML 구문을 따릅니다.
  13. 계속...
  14. page-name.wxss
  15. wxml은 Wei Xin을 나타냅니다. 페이지 스타일을 정의하는 데 사용되는 스타일 시트
  16. 구문은 CSS 구문을 따르고 CSS의 기본 사용법과 길이 단위를 이해합니다. 주로 rpx 반응형 픽셀)
  17. [관련 권장 사항]

1.

WeChat 애플릿 전체 소스 코드 다운로드

2. 🎜>WeChat 미니 프로그램 데모: NetEase Cloud Music 모방

위 내용은 소규모 프로그램 개발의 간단한 예를 자세히 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿