background-color:#FFFFFF;text-align:center;">
WeChat 미니 프로그램은 공식 출시되기 전에 빠르게 모든 사람들의 논의의 초점이 되었습니다. 따라서 비공개 베타 초대를 받아야만 미니 프로그램의 개발 과정을 경험할 수 있다고 생각할 수도 있습니다. 사실, 다음과 같이 누구나 경험할 수 있습니다. 모두가 함께 이해하도록합시다.
WeChat 웹 개발자 도구 다운로드
우선, WeChat은 소규모 프로그램을 위한 자체 통합 개발 도구를 제공합니다. 이 페이지에서만 다운로드하면 됩니다.
다운로드가 완료된 후 개발자 도구를 엽니다. QR 코드 로그인 인터페이스가 있습니다. WeChat 코드를 사용하여 로그인하면 개발자 도구를 통해 기본 프로젝트를 생성할 수 있습니다. 프로젝트의 파일 구조는 다음과 같습니다.
모든 코드 편집 및 실행 미리보기는 이 개발자 도구에서 수행할 수 있습니다. . 다음으로 WeChat 애플릿의 프로젝트 구조를 살펴보겠습니다.
프로젝트 구조
위와 같이 루트 디렉터리에는 app.js, app.json, app.wxss 3개의 파일이 있습니다. 그 중 app.js는 프로그램의 메인 입구용 스크립트 파일이고, app.json은 글로벌 구성 파일, app.wxss는 미니 프로그램의 스타일 시트 파일입니다.
먼저 app.json을 살펴보겠습니다.
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
이 구성 파일은 두 개의 노드를 정의합니다. 페이지는 미니 프로그램의 모든 페이지에 해당하는 경로이고, 창은 미니 프로그램 창의 구성 정보입니다.
스타일 파일 app.wxss를 살펴보겠습니다.
.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; }
여기서 정의하는 특정 스타일을 먼저 살펴볼 필요는 없고 먼저 프로젝트 구조를 이해하면 됩니다. 다음으로 프로그램의 주요 입구인 app.js를 살펴보겠습니다.
//app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })
여기에서 App object가 초기화되고 onLaunch, getUserInfo 및 globalData 세 가지 메소드가 정의됩니다. 먼저 onLaunch를 살펴보겠습니다.
onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }
먼저 wx.getStorageSync 메서드는 로그를 키로 사용하여 로컬 캐시 데이터를 가져옵니다. 이 메소드 자체에 전달된 로그는 특별한 의미가 없으며 단지 우리가 사용하는 캐시 데이터를 나타내는 데 사용됩니다. 이 메커니즘은 iOS의 NSUserDefaults와 유사한 것으로 이해될 수 있습니다.
그런 다음 현재 날짜를 이 캐시 배열 로그.unshift(Date.now()) 에 삽입하려고 합니다. 마지막으로 setStorageSync 메소드를 호출하여 새 캐시 콘텐츠를 로컬 캐시에 씁니다.
onLaunch 메소드는 애플릿의 라이프 사이클 메소드이기 때문에 애플릿이 시작될 때 호출되며 현재 시작 날짜가 기록되어 로컬 캐시에 기록됩니다. 맞습니다. 전체 onLaunch 메소드가 바로 그 일을 합니다.
두 WeChat 플랫폼의 wx.login 및 wx.getUserInfo 함수를 호출하여 현재 사용자의 로그인 정보를 획득하고 이를 콜백 함수 cb에 전달하는 getUserInfo 메소드를 살펴보겠습니다.
getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }
초기에 대한 내용입니다. if 판단 if( this.globalData.userInfo) 지금은 자세히 알아볼 필요 없이 else 부분만 살펴보세요.
页面结构
了解完根目录的几个文件, 咱们再来看看页面文件, 正如咱们刚开始截图中看到的项目结构:
所有的页面都在 pages 文件夹中。 我们这个示例工程中有两个页面 index 和 logs。 还记得我们前面在 app.json 看到的页面配置吗:
"pages":[ "pages/index/index", "pages/logs/logs" ]
正好对应上咱们现在看到的两个目录, 还要记得一点, pages 数组中的第一个元素会作为我们小程序的主页。 切记,index 页面之所以是首页,是因为它是 pages 里面的第一个元素, 而不是因为它的名称是 index。
我们来看看 index 页面的构成, index.js, index.wxml, index.wxss。 index.js 是页面的脚本文件, index.wxml 是页面的 UI 文件, index.wxss 是页面的样式文件。
先看一下 index.js:
//index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
getApp() 方法获取我们的 app 实例。 然后在看 onLoad 方法, 使用我们刚才提到的 getUserInfo 方法获取用户信息,并设置到 data 属性中。
bindViewTap 方法会绑定一个事件,这个事件调用 wx.navigateTo 方法。 这个方法其实就是页面跳转,从代码中也不难看出,跳转到了 logs 页面。
脚本文件就这些内容了,咱们继续再来看看 UI 文件, index.wxml:
<!-- <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view> -->
这个就是小程序 index 页面的 UI 文件了,其实就是微信平台定义了一系列组件,最外层是
<!-- <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> -->
首先 bindtap="bindViewTap" 给这个 View 绑定了一个点击事件,也就是我们前面 index.js 对应的这个方法,用户点击这个 View 就会跳转到 logs 页面上。 然后这个 View 里面包含了一个 Image 和 Text, Image 的 src 属性设置为 userInfo.avatarUrl, 代表当前用户的头像, Text 中使用 userInfo.nickName, 代表当前用户的昵称。
这样, index 页面的整体逻辑就都完成了, 还有一个 index.wxss 样式文件,这个咱们就先略过。
再来看看第二个视图:
<!-- <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> -->
motto 其实就是我们在 index.js 中定义的一个属性:
data: { motto: 'Hello World', userInfo: {} }
它会在页面上显示一个 Hello World。
现在,我们切换到调试界面, 就可以看到小程序的主页了, 和我们刚刚描述的 UI 完全一样吧:
这里的用户头像和昵称是动态从你的登录状态中取到的。
然后我们在这里点击用户的头像,就会跳转到 logs 页面, 列出你每次登录小程序的时间点。
미니 프로그램 업로드
이제 WeChat 미니 프로그램의 기본 개발 과정을 소개했습니다. 아직 소개하지 않은 로그 페이지도 있지만 기본 아이디어는 인덱스 페이지와 동일하므로 자세한 내용은 다루지 않겠습니다. 소규모 프로그램을 개발한 후 어디에 배포해야 합니까? 나는 모든 사람이 같은 문제를 가지고 있다고 믿습니다. 대답도 매우 간단합니다. Project 탭으로 전환한 다음 업로드 버튼을 클릭하세요.
내 환경에는 내부 테스트 계정이 없으므로 업로드 영역에 프로젝트가 AppID. 테스트 계정이 있는 경우 AppID가 표시됩니다. 현재 내부 베타 계정만 미니 프로그램을 업로드할 수 있습니다. 그것이 유일한 차이점입니다. 베타 계정이 없으면 업로드만 할 수 없고, 로컬에서 개발하고 테스트할 수 있습니다.
이번 미니프로그램 업로드 방식은 조금 색다른 느낌을 줄 수 있습니다. 우리가 일반적으로 알고 있듯이 웹 앱은 일반적으로 자체 서버를 구축하고 유지 관리해야 합니다. 미니 프로그램의 호스팅 방법은 실제로 네이티브 앱을 개발하는 방법과 거의 동일합니다. 프론트엔드는 웹 기술처럼 보이는 js를 사용하지만 핵심 아이디어는 기존 웹 앱과 다릅니다. React Native와 유사한 구현과 비슷합니다.
End
이번에는 가장 간단한 소규모 프로그램의 전반적인 구조와 개발 아이디어를 처음부터 끝까지 모두와 함께 완전히 경험했습니다. 개인적으로 적절한 진입점을 찾을 수 있다면 미니 프로그램 플랫폼에서도 좋은 기회를 찾을 수 있다고 생각합니다. 하지만 내 요점은, 미니 프로그램의 출현이 누군가를 즉시 전복시킬 것이라고 생각하지 말고, 인터넷에서 사람들이 미니 프로그램이 큰 것이 되기 어렵다고 말하는 것을 들을 필요가 없다는 것입니다. 가능성. 자신이 잘하는 것과 사용자가 필요로 하는 것이 무엇인지 찾아내면 좋은 제품을 만들 수 있을지도 모릅니다. 이번에는 기본적인 기술 검토도 도와드릴 예정이니, 도움이 되셨으면 좋겠습니다.
【관련 추천사항】
2. WeChat Mini 프로그램 신청 계정 개발 체험
3 WeChat Mini 프로그램 신청 방법 WeChat 만들기 튜토리얼 처음부터 미니 프로그램
위 내용은 미니 프로그램 개발 과정 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

随着移动互联网技术和智能手机的普及,微信成为了人们生活中不可或缺的一个应用。而微信小程序则让人们可以在不需要下载安装应用的情况下,直接使用小程序来解决一些简单的需求。本文将介绍如何使用Python来开发微信小程序。一、准备工作在使用Python开发微信小程序之前,需要安装相关的Python库。这里推荐使用wxpy和itchat这两个库。wxpy是一个微信机器

小程序能用react,其使用方法:1、基于“react-reconciler”实现一个渲染器,生成一个DSL;2、创建一个小程序组件,去解析和渲染DSL;3、安装npm,并执行开发者工具中的构建npm;4、在自己的页面中引入包,再利用api即可完成开发。

微信小程序是一种轻量级的应用程序,可以在微信平台上运行,不需要下载安装,方便快捷。Java语言作为一种广泛应用于企业级应用开发的语言,也可以用于微信小程序的开发。在Java语言中,可以使用SpringBoot框架和第三方工具包来开发微信小程序。下面是一个简单的微信小程序开发过程。创建微信小程序首先,需要在微信公众平台上注册一个小程序。注册成功后,可以获取到

实现思路x01服务端的建立首先,在服务端,使用socket进行消息的接受,每接受一个socket的请求,就开启一个新的线程来管理消息的分发与接受,同时,又存在一个handler来管理所有的线程,从而实现对聊天室的各种功能的处理x02客户端的建立客户端的建立就要比服务端简单多了,客户端的作用只是对消息的发送以及接受,以及按照特定的规则去输入特定的字符从而实现不同的功能的使用,因此,在客户端这里,只需要去使用两个线程,一个是专门用于接受消息,一个是专门用于发送消息的至于为什么不用一个呢,那是因为,只

PHP与小程序的地理位置定位与地图显示地理位置定位与地图显示在现代科技中已经成为了必备的功能之一。随着移动设备的普及,人们对于定位和地图显示的需求也越来越高。在开发过程中,PHP和小程序是常见的两种技术选择。本文将为大家介绍PHP与小程序中的地理位置定位与地图显示的实现方法,并附上相应的代码示例。一、PHP中的地理位置定位在PHP中,我们可以使用第三方地理位

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了如何在小程序中用公众号模板消息,下面一起来看一下,希望对大家有帮助。

随着小程序的广泛应用,越来越多的开发者需要将其与后台服务器进行数据交互,其中最常见的业务场景之一就是上传文件。本文将介绍在小程序中实现文件上传的PHP后台实现方法。一、小程序中的文件上传在小程序中实现文件上传,主要依赖于小程序APIwx.uploadFile()。该API接受一个options对象作为参数,其中包含了要上传的文件路径、需要传递的其他数据以及

苏州健康码的小程序叫“苏康码”,它是苏州市疫情防控指挥部指定的通行服务码,疫情防控期间在全市范围内通用,可以作为广大民众日常出行的重要凭证,同时作为防疫人员查验的主要依据;也是省内所有来苏逗苏人员以及在苏工作学习生活,旅游或临时停留人员申报的键康申报数据为基础,结合相关数据比对后动态生成的个人电子健康凭证。


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

Dreamweaver Mac版
시각적 웹 개발 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
