検索
ホームページWeChat アプレットミニプログラム開発WeChat ミニ プログラムの完全な開発プロセスを体験してください。

WeChat ミニ プログラムは、正式にリリースされる前にすぐにみんなの議論の焦点になりました。そのため、内部テストの招待状を受け取った場合にのみ、ミニ プログラムの開発プロセスを体験できると思われるかもしれません。実際には、誰でも体験できます。以下でそれを見てみましょう。

WeChat Web 開発者ツールをダウンロードします

まず第一に、WeChat は独自の小さなプログラム統合開発ツールを提供します。このページからダウンロードするだけです:

ダウンロードが完了したら、開発者ツールを開きます。ツールには QR コード ログイン インターフェイスがあります。 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" }
}

この設定ファイルは、2 つのノードを定義します。page はミニ プログラムのすべてのページに対応するパスであり、window はミニ プログラム ウィンドウの設定情報です。

スタイル ファイル 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 オブジェクト が初期化され、onLaunch、getUserInfo、globalData の 3 つのメソッドが定義されています。 まず onLaunch を見てみましょう:

onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

}

まず、wx.getStorageSync メソッドは、ログをキーとして使用してローカルのキャッシュ データを取得します。 このメソッドに渡されるログには特別な意味はなく、使用するキャッシュ データを表すためにのみ使用されます。 このメカニズムは、iOS の NSUserDefaults に似ていると理解できます。

次に、現在の日付をこのキャッシュ array logs.unshift(Date.now()) に挿入します。 最後に、setStorageSync メソッドを呼び出して、新しいキャッシュ コンテンツをローカル キャッシュに書き込みます。

onLaunch メソッドはアプレットのライフサイクル メソッドであるため、アプレットの起動時に呼び出され、現在の起動日が記録されてローカル キャッシュに書き込まれます。 そうです、onLaunch メソッド全体がまさにそれを行います。

getUserInfo メソッドを見てみましょう。このメソッドは、WeChat プラットフォームで wx.login 関数と wx.getUserInfo 関数を呼び出して現在のユーザーのログイン情報を取得し、それをコールバック関数に渡します。最初の if 判定 If(this.globalData.userInfo) 今のところ詳しく調べる必要はありません。else 部分を見てください。

页面结构

了解完根目录的几个文件, 咱们再来看看页面文件, 正如咱们刚开始截图中看到的项目结构:

WeChat ミニ プログラムの完全な開発プロセスを体験してください。

所有的页面都在 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 文件了,其实就是微信平台定义了一系列组件,最外层是 还记得 container 么? 我们在最外层的 app.wxss 定义了它的样式。 它里面包含了两个 View。先来看看第一个:

<!-- <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: &#39;Hello World&#39;,
    userInfo: {}
 }

它会在页面上显示一个 Hello World。

现在,我们切换到调试界面, 就可以看到小程序的主页了, 和我们刚刚描述的 UI 完全一样吧:

WeChat ミニ プログラムの完全な開発プロセスを体験してください。

这里的用户头像和昵称是动态从你的登录状态中取到的。

然后我们在这里点击用户的头像,就会跳转到 logs 页面, 列出你每次登录小程序的时间点。

ミニプログラムのアップロード

ここまでWeChatミニプログラムの基本的な開発プロセスを紹介しました。紹介していないログページもありますが、基本的な考え方はインデックスページと同じです。詳細には立ち入りません。 小さなプログラムを開発した後、それをどこにデプロイする必要があるでしょうか? 誰もが同じ悩みを抱えていると思います。 答えも非常に簡単です。プロジェクトタブに切り替えて、アップロードボタンをクリックします:

WeChat ミニ プログラムの完全な開発プロセスを体験してください。

私の環境には内部テストアカウントがないため、アップロード領域には、プロジェクトがAppID テストアカウントがある場合は、AppID が表示されます。 現在、ミニ プログラムをアップロードできるのは内部ベータ アカウントのみです。それが唯一の違いです。ベータ アカウントがない場合はアップロードできませんが、ローカルで開発してテストすることはできます。

このミニプログラムのアップロード方法は少し違うように感じるかもしれません。 誰もが通常理解しているように、Web アプリでは通常、独自のサーバーを構築して保守する必要があります。 ミニプログラムのホスティング方法は、実際にはネイティブアプリの開発方法とほぼ同じです。 フロントエンドには Web テクノロジーに似た js が使用されていますが、その核となる考え方は従来の Web アプリとは異なります。 React Native に似た実装に似ています。

終わり

今回は皆さんと一緒に、最も単純な小さなプログラムの全体構造と開発の考え方を最初から最後まで完全に体験してきました。個人的には、適切なエントリーポイントを見つけることができれば、ミニプログラムプラットフォームでまだ良い機会を見つけることができると感じています。しかし、私が言いたいのは、ミニプログラムの出現がすぐに誰かを転覆させるとは思わないでください、そして、ミニプログラムが大きなものになるのは難しいというインターネット上の人々の意見を聞く必要はなく、ミニプログラムが存在しないと考える必要はありません。チャンス。 自分の得意なこと、ユーザーが必要としているものを見つければ、良い商品ができるかもしれません。 今回も基本的な技術レビューをしていきたいと思いますので、お役に立てれば幸いです。

以上がWeChat ミニ プログラムの完全な開発プロセスを体験してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
微信文件多久过期微信文件多久过期Nov 21, 2022 pm 02:12 PM

微信文件的过期时间需要根据情况来判断:1、如果发送的文件没有打开过,则在72小时以后微信系统会自动清理掉,即过了三天文件就会过期;2、如果已经查看了微信文件,但是并没有下载(当然已经下载的文件也是一样的),那么文件是可以保留180天的,在这180天以内随时都可以去下载。

微信拉黑和删除有什么区别微信拉黑和删除有什么区别Oct 18, 2022 am 11:29 AM

区别:1、拉黑后对话框从主页消失,但是聊天记录还在;删除后聊天记录全部消失不见了。2、拉黑后还能发给他,但是收不到他的消息;删除后不能发信息了。3、拉黑后双方都不可见彼此的朋友圈;删除对方以后,你看不到对方的朋友圈了,对方是否能看到你的,取决于设置(允许陌生人查看十张照片)与否,如果设置则可以看到朋友圈。

支持微信付款的购物平台有哪些支持微信付款的购物平台有哪些Nov 02, 2022 pm 02:44 PM

支持微信付款的购物平台有:1、京东,是中国的综合网络零售商;2、唯品会,是一家在线销售品牌折扣商品的互联网公司;3、拼多多,是社交新电商领导者,更懂消费者的购物平台;4、京喜,是京东旗下生活消费商城;5、蘑菇街,一个电子商务网站;6、聚美优品,是一家以销售化妆品为主的时尚购物网站;7、微店,是一个云推广电子商务平台;8、考拉海购,是一个跨境海淘业务为主的会员电商平台。

微信怎么查看ip地址微信怎么查看ip地址May 31, 2023 am 09:16 AM

微信查看ip地址的方法:1、登录电脑版微信,右键点击屏幕下方的任务栏,点击“任务管理器”;2、弹出任务管理器时,点击左下角的“详细信息”;3、任务管理器进入“性能”选项,点击“打开资源监视器”;4、选择“网络”,勾选微信进程“Wechat.exe”;5、点击下面的“TCP连接”即可监视微信网络IP相关情况,发送消息得到回复就会显示他人的IP地址。

微信可以绑别人的银行卡号么微信可以绑别人的银行卡号么Mar 14, 2023 pm 04:53 PM

可以。未经过实名认证的微信号,可以绑定他人的银行卡,但在绑定过程中需要提供银行卡的开户人姓名、开户行地址、开户时预留的联系方式及银行卡支付密码;已通过实名认证的微信号,无法绑定他人银行卡,只能添加使用自己身份证办理的银行卡。

一个身份证只能绑定一个微信吗一个身份证只能绑定一个微信吗Mar 02, 2023 pm 01:50 PM

不是,一个身份证能绑定5个微信。按照微信当前规定,一个身份证可以实名认证5个微信号;如果已经实名认证了5个微信账号,但是还想要继续实名,就要把已经实名认证的一些不用的微信号清除以后,才可以再实名认证新的微信号。

闲鱼支持微信支付吗闲鱼支持微信支付吗Nov 07, 2022 pm 03:31 PM

闲鱼是不支持微信支付的,仅支持使用支付宝进行付款;闲鱼是阿里巴巴旗下闲置交易平台App客户端,会员只要使用淘宝或支付宝账户登录,无需经过复杂的开店流程,即可达成包括一键转卖个人淘宝账号中“已买到宝贝”、自主手机拍照上传二手闲置物品、以及在线交易等诸多功能。

微信赞赏码和收款码的区别是什么微信赞赏码和收款码的区别是什么Oct 31, 2022 pm 03:18 PM

区别:1、赞赏码是用于别人给自己打赏的,收取小费等小金额的赞赏给予,而收款码是一般的收款行为,可以进行大额收费的二维码;2、收款码是随时会变的,如果不是商家收款码,每次打开都会变,但是赞赏码不同,赞赏码是不会变的;3、赞赏码只能进行小额的首款,而收款码将可以大额首款。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン