1. 前提条件
長く使いたい場合は手続きが煩雑ですが、公式サイトで個人アカウントを登録することをおすすめします。ただし、導入ケースは比較的単純です。公式 WeChat ミニ プログラムに個人アカウントを登録する必要はありません。公式 WeChat 開発者ツールをインストールして、ローカル コンピューター上でミニ プログラムを作成して実行するだけです。
ダウンロードリンク: https://pan.baidu.com/s/1A2ngDV-LguBBNyhvGjF8kQ?pwd=4qi5
2. 結果表示
3. WeChat アプレット プロジェクトを作成する
3.1 ダウンロード プロセスは何も考えずに行われます。次のステップでは、開発者ツールを開いて + 記号をクリックして新しいプロジェクトを作成します。
3.2 次の設定に従って [OK] をクリックします。
画像がルールに違反している場合は、説明文を読んでください。プロジェクト名とディレクトリはカスタマイズされています。AppID は申請した公式個人アカウントにあります。私の場合は wx87c1988b028cb1c1 です。開発モードは小規模プログラムで、クラウド サービスは使用しません。 JavaScript の基本テンプレートが使用されます。
4. コードを書く
4.1 ダブルクリックして app.json を開きます。コードは次のとおりです。
app.json はグローバル構成ファイルで、pages はページ パスを表し、window はページ全体の構成を表し、tabBar は上部または下部にあるタッチ バーです。編集領域の左側にあるページ ディレクトリにあるインデックス ファイルとログ ファイルは削除できることに注意してください。コードをコピーした後、ctrl+s で保存すると、コードが自動的にコンパイルされ、左側に 3 つのフォルダーが表示されます。 、つまり、ホーム、メッセージ、および概要です。
{
"pages":[
"pages/home/home",
"pages/message/message",
"pages/about/about"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "生活服务",
"navigationBarTextStyle":"white",
"enablePullDownRefresh": true,
"backgroundColor": "#efefef"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "主页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
4.2 ページのホームで、ダブルクリックして home.js を開きます。コードは次のとおりです。
Pages フォルダーの下には、各フォルダーに xx.js、xx.json、xx.wxml、xx.wxss の 4 つがあり、js という拡張子の付いたファイルには、論理コードであるデータとメソッドが保存され、json という拡張子の付いたファイルが保存されています。このページの設定を保存します (開始時には当面は使用されません)。 wxml 接尾辞が付いたファイルはブラウザ内の HTML と同様の HTML を保存します。また、wxss はブラウザ内の CSS スタイルに相当します。
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
SwiperList:[],
GridList:[]
},
getSwiperList(){
wx.request({
url: 'https://www.escook.cn/slides',
method: 'GET',
success: (res) =>{
console.log(res.data);
this.setData({
SwiperList: res.data
})
}
})
},
getGridList(){
wx.request({
url: 'https://www.escook.cn/categories',
method: 'GET',
success:(res)=>{
console.log(res.data);
this.setData({
GridList: res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperList();
this.getGridList();
},
})
4.3 ダブルクリックして home.wxml を開きます。コードは次のとおりです。
swiper はカルーセル ラベル、view は div に相当、image は img に相当、image の src は href に相当、wx:for は vue の v-for に相当、wx:key は v-key に相当します。
<!--pages/home/home.wxml-->
<swiper class="swiperlist" indicator-dots="true" circular="true" autoplay="true" interval="1000">
<swiper-item wx:for="{
{SwiperList}}" wx:key="id">
<image src="{
{item.image}}" mode="heightFix"></image>
</swiper-item>
</swiper>
<view class="gridList">
<view class="gridItem" wx:for="{
{GridList}}" wx:key="id">
<image src="{
{item.icon}}"></image>
<text>{
{item.name}}</text>
</view>
</view>
<view class="images">
<image src="/images/link-01.png" mode="widthFix"></image>
<image src="/images/link-02.png" mode="widthFix"></image>
</view>
4.4 ダブルクリックして home.wxss を開きます。コードは次のとおりです。
cssスタイルと同じ効果と同等
/* pages/home/home.wxss */
.gridList{
display: flex;
flex-wrap: wrap;
border-left: 1px solid gray;
border-top: 1px solid gray;
}
.gridItem{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.gridItem image{
width: 60rpx;
height: 60rpx;
}
.gridItem text{
font-size: 24rpx;
text-align: center;
margin-top: 10rpx;
}
.images{
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.images image{
width: 45%;
}
5. 運転表示
コードをコピーした後、一部のページ画像を読み込めないことがわかりました。次のオプション (詳細 -> ローカル設定 -> 検証なし...) を必ずチェックしてください。設定が完了すると、すべての画像が読み込まれるようになります。
6. ソースコードとソース
ここをクリックしてソースコードを入手し、馬bステーションの教育ビデオを参照してください。