WeChat アプレット API の紹介
Mini Program API は Mini Program 開発の中核であり、開発者はこの API を通じて、ネットワーク リクエスト、ファイル操作、デバイス情報、地理的位置、ローカル ストレージなど、WeChat の最下層にカプセル化された高度な機能を取得できます。
アプレットの API はグローバル オブジェクト wx を名前空間として使用し、フォーマットは wx.method name() で、グローバルに呼び出すことができます。
次に、いくつかの一般的に使用される api を紹介しますapi的基础, 路由, , 网络请求, 界面, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 、編集者の提案を紹介する前に、用户信息小さなプログラム api をマスターしたい場合は、 WeChat 開発ドキュメントを読んでそれを使用することを学ぶ必要があります! ! !上传下载开放接口
APIの基本
- wx.getSkylineInfoSync( )システム情報の取得
windowHeight 使用可能なウィンドウの高さ
windowWidth 使用可能なウィンドウの幅statusBarHeight
ステータス
バーのさ
wxjs で wxml のシステム情報を取得できます
//wxml代码
<view class="title">基础</view>
<view>wx.getSystemInfoSync() 同步获取系统信息</view>
//wxjs代码
//生命周期函数--监听页面加载
onLoad(options) {
var sys = wx.getSystemInfoSync();
console.log(sys)
},
詳細は図で見ることができます
ミニ プログラム ルーティング
プログラムは単一のページであり、ページの切り替えは基本的に部分的な更新であり、実際にはルーティングによって実装されます。ただし、アプレットのルートはデフォルトでカプセル化されており、下部に構成されたメニューとナビゲーター ラベルがあります。
(ルーティングエディタについては前回の記事で詳しく紹介しています)
wx.navigateTo({}) ジャンプ- 現在のページを保持し、アプリ内のページにジャンプします。しかし、タブバーページにジャンプできません。元のページに戻るには wx.navigateBack を使用します。アプレットのページ スタックには、最大 10 のレイヤーがあります。
wx.redirectTo() リダイレクト- 現在のページを閉じて、アプリ内のページにジャンプします。ただし、タブバー ページへのジャンプは許可されていません。
wx.switchTab() トグルボトムバー- tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます
wx.navigateBack（ ） 戻る
<navigator url="/pages/home/home.js">home</navigator>
<navigator url="/pages/home/home.js" open-type="redirect">首页-redirect</navigator>
通信網
1. ネットワークリクエスト wx.request (以前の記事でも詳しく紹介しています)
ここで、エディターはいくつかの共通パラメーターを強調します
url要求アドレス (必須)
dataデータ (post)
header要求ヘッダー情報
timeoutタイムアウト
methodsメソッド post | get | put |
success成功のコールバック
fail関数 インターフェース呼び出しに失敗したコールバック関数が
complete完了します (成功と失敗の両方が実行されます)読み込みプロンプトを終了します
ファイル リソースをローカルにダウンロードします。クライアントは、HTTPS GET 要求を直接開始し、ファイルのローカル一時パス (ローカル パス) を返します。1 回のダウンロードで許可される最大ファイル サイズは
200 MB です。
//wxml代码
<view class="title">wx.downloadFile 下载文件</view>
<view class="title">wx.saveImageToPhotosAlbum 保存图片到相册</view>
<image src="{
{pic}}" mode="aspectFill" bindtap="downPic"></image>
//js代码
downPic(){
wx.downloadFile({
url: this.data.pic,
success(res){
console.log(res);
// 把临时文件保存到相册(需要用户授权)
// 当点击下载时会弹出是否允许访问您的相册 同意则可下载
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(){
// 提示保存成功
wx.showToast({
title: '下载图片成功',
icon:"none"
})
}
})
}
})
},
レンダリング
3. wx.uploadFile をアップロードしますここでwx.chooseImage
を参照できますアルバムから画像を選択chooseMessageFile画像またはビデオを選択媒体相关
ローカル リソースをサーバーにアップロードします。クライアントは、コンテンツ タイプが multipart/form-data である HTTPS POST 要求を開始します。
//wxml代码
<button type="warn" bindtap="upImg">上传图片</button>
<view class="title">wx.uploadFile 上传</view>
<view class="title">wx.chooseMedia 选择图片或者视频</view>
<view class="title"> wx.chooseImage 从相册选择图片</view>
//js代码
upImg(){
var that = this;
// 选择图片
// wx.chooseImage({
// 选择媒体
wx.chooseMedia({
count: 1, //媒体数量
success(res){
console.log(res)
// 获取选择的第0个图片临时地址
var tempFile = res.tempFiles[0].tempFilePath;
wx.uploadFile({
filePath: tempFile,
name: 'file',
url: 'http://dida100.com/ajax/file.php',
success:res=>{
console.log(res);
// 转换为js对象
var data = JSON.parse(res.data);
// 更新图片信息
that.setData({
pic:"http://dida100.com"+data.pic})
}
})
}
})
},
レンダリング
インターフェース
よく使われるwx.showToast、wx.showModal、wx.showLoading、wx.setNavigationBarTitle1をいくつか紹介しますwx.setNavigationBarColor
。
//wxml代码
<button size="mini" bindtap="showTip">提示</button>
//js代码
showTip(){
// setNavigationBarTitle 标题栏文本
wx.setNavigationBarTitle({
title: 'api讲解',
})
wx.showToast({
title: '你好！',
icon:"none"
})
},
レンダリング
//wxml代码
<button size="mini" bindtap="showTip">提示</button>
//js代码
showTip(){
// setNavigationBarTitle 标题栏文本
wx.setNavigationBarTitle({
title: 'api讲解',
})
wx.showToast({
title: '你好！',
icon:"none"
})
レンダリング
//wxml代码
<button size="mini" bindtap="showTip">提示</button>
//js代码
showTip(){
// setNavigationBarTitle 标题栏文本
wx.setNavigationBarTitle({
title: 'api讲解',
})
// wx.showLoading 加载提示
wx.showLoading({
title: '加载中...',
})
setTimeout(()=>{
wx.hideLoading();
},2000)
},
レンダリング
2.ナビゲーションバー
//wxml代码
<button size="mini" bindtap="showTip">提示</button>
//js代码
showTip(){
// setNavigationBarTitle 标题栏文本
wx.setNavigationBarTitle({
title: 'api讲解',
})
// setNavigationBarColor 设置导航栏的颜色
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#000000',
animation: {
duration: 400,
timingFunc: 'easeIn'
}
})
}
レンダリング
オープンインターフェース
ユーザー情報を取得します。これは、ページがクリック イベントを生成した後にのみ呼び出すことができ (たとえば、ボタンの bindtap のコールバックで)、リクエストごとに承認ウィンドウがポップアップし、ユーザーが同意した後に userInfo が返されます。このインターフェースは wx.getUserInfo を置き換えるために使用されます
//wxml代码
<view class="title">开放能力</view>
<view>wx.getUserProfile 获取用户信息</view>
<view wx:if="{
{userInfo.nickName}}">
<image style="width: 100px; height: 100px;" src="{
{userInfo.avatarUrl}}"></image>
<view>{
{
userInfo.nickName}}</view>
</view>
<button wx:else size="mini" bindtap="getUser">获取用户信息</button>
//js代码
onLoad(options) {
var sys = wx.getSystemInfoSync();
console.log(sys);
// 本地获取用户信息
var userInfo = wx.getStorageSync('userInfo')||{
};
// 更新用户信息
this.setData({
userInfo})
},
getUser(){
var that = this;
wx.getUserProfile({
desc: '需要获取您的昵称',
success:res=>{
console.log(res);
// 更新本地用户信息
that.setData({
"userInfo":res.userInfo})
// 存储用户信息到本地
wx.setStorageSync('userInfo', res.userInfo)
}
})
},
end...
記事の各ステップは、簡単に検索できるように公式ドキュメントにジャンプできます.
公式の Q&A に精通していることを忘れないでください! ! !
勉強中の方の参考になれば幸いです
次号でお会いしましょう〜