序文
プロジェクトのニーズにより、私たちは最近、公式の開発ツールから始めて、WeChatアプレット開発について学び始めました。WeChatミニプログラムは、開発の難易度と利便性の点で優れた選択肢であり、学生にとってあまり多くのことを考慮する必要はありません。このシリーズは、今後参照できる学習ノートを書くことを目的としており、一種の記憶でもありますので、読んでいただいた方に少しでもお役に立てれば光栄です。
準備ができて
ツール
プロジェクトのインストールと確立は非常に簡単です。APPIDの場合、テスト番号を一時的に選択するか空白のままにして（オンラインにする必要がある場合は、実際のIDを使用する必要があります）、言語としてJavaScriptを選択します。新しく作成されたプロジェクトにはデフォルトのコードがあります。学習を開始すると、それらのコードを理解できず、削除するだけです。一見すると、開発者ツールは主に5つの部分、エミュレーター（モバイルデバイスのエミュレーション）、エディター（コードの書き込み）、デバッガー、ディレクトリツリー、およびツールバーに分かれています。最初の4つはツールにあります柱にセットして消えます。
シミュレーター
エミュレータには電話モデルとステータスバーの選択肢があり、最も重要なのは電話モデルです。私たちが開発した小さなプログラムはさまざまなモバイルデバイスに適用され、デバイスの画面解像度が異なるため、一般的にiphon6をベンチマークとして選択します。したがって、pxを使用してデッドスタイルを記述した場合、デバイスのスタイルを変更することは好ましくありません。オフ。WeChatアプレットはrpxを使用してこの問題を解決します。つまり、幅が375物理ピクセルの画面では、1rpx = 375/375 = 1pxです。iPhone6の場合、画面の幅は750物理ピクセル、つまり375pxなので、1rpx = 375/750 px = 0.5pxと結論付けられます。
ディレクトリツリー（Drectory Tree）
ディレクトリツリーと物理アドレスの間にはマッピング関係があり、アプレットでのアクセスは相対アドレスのみを使用します。デフォルトのプロジェクトディレクトリツリーには、ページディレクトリ、ユーティリティディレクトリ、およびいくつかのグローバルファイルの3つの部分が主に含まれていることがわかります。通常、各ページはページに格納されます。デフォルトのプロジェクトには、ホームページインデックスとログページの2つのページが含まれます。各ページは、対応するレイアウトスタイルファイルで構成されます。utilsは主に、util.jsで実装されたネットワークリクエストなどのいくつかのツールタイプの関数を配置し、エクスポートして、最後に必要なページにインポートして、一部のコンポーネントを使用します。今後も引き続きコンポーネントを使用する可能性があります。コンポーネントを格納するためのコンポーネントと呼ばれるディレクトリを作成できます。
編集者
背景色やフォントサイズが気に入らない場合は、[設定] > [外観の設定]で変更できます。
構造
コードは.jsファイルで構成されます（アプレットの主な開発言語はJavaScriptです。開発者はJavaScriptを使用してビジネスロジックを開発し、アプレットのAPIを呼び出してビジネス要件を完了します）。プログラミング言語ではなく、小さなプログラムでは、JSONが静的構成の役割を果たす）、. wxmlファイル（WeiXin Markup言語は、小さなプログラムフレームワークによって設計されたタグ言語のセットであり、小さなプログラムの基本コンポーネントであるイベントシステムと組み合わせることができます。ページの構造）、. wxssファイル（WeiXinスタイルシート）は、小さなプログラムに使用されるスタイル言語のセットであり、WXMLコンポーネントのスタイル、つまり視覚効果を記述するために使用されます。WXSSは、Web開発におけるCSSに似ています。小規模なプログラム開発であるWXSSは、CSSの構成にいくつかの追加と変更を加えました。
グローバル構成ファイル
- Project.config.json：開発環境の構成に使用されます。
{
"description": "Project configuration file",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.6.6", //库版本
"appid": "wx866f52f21b24eed3", //appID
"projectname": "miniprogram-test-2",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}- app.wxss：全体的なスタイルファイル。コンテナークラスはプロジェクトのすべてのページで使用できます（パブリックスタイル）。
/**app.wxss**/
.container {
height: 100%; //高度是整个容器高度
display: flex; //布局方式：flex
flex-direction: column; //主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
align-items: center; //非主轴方向居中对齐
justify-content: space-between; //项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
padding: 200rpx 0; //表示一个框内边距--这一层位于内容框的外边缘与边界的内边缘之间
box-sizing: border-box; //用属性box-sizing来调整框模型
background-color: red; //背景颜色
} - app.json：
app.jsonアプレットのルートディレクトリにあるファイル は、WeChatアプレットのグローバル構成（静的）に使用されます。ファイルのコンテンツはJSONオブジェクトであり、ページとウィンドウは多くの属性のうちの2つです。前者はアプレットを構成するページを指定するために使用され、各項目はページのパス（ファイル名を含む）情報に対応し、後者はアプレットのステータスバー、ナビゲーションバー、タイトル、およびウィンドウの背景色を設定するために使用されます。（注：実際の書き込みコードではコメントを入力できません）
{
"pages":[ // 页面路径列表
"pages/index/index",
"pages/logs/logs"
],
"window":{ //全局的默认窗口表现
"backgroundTextStyle":"light", //下拉loading的样式，仅支持 dark/light
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色
"navigationBarTitleText": "WeChat", //导航栏标题文字内容
"navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
}
}- app.js：プロジェクト全体の論理処理。onLoad、onshow、onReadyなどのいくつかのライフサイクル関数の使用を含みます。
ページ構成ファイル
- .json：各アプレットページは、
.jsonファイルを使用してこのページのウィンドウパフォーマンスを構成することもでき ます。ページの設定項目は、現在のページで説明しますapp.jsonのwindow同じ設定項目。 - .wxml：対応するページ構造を構築するために使用されます
<!--index.wxml--> <!--view:视图容器 类-->
<view class="container"> <!--container：全局的一个容器，样式在app.wxss中-->
<view class="userinfo"> <!--userinfo：存放用户信息的容器，在index.wxss中设置样式-->
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <!--button：表单组件：按钮-->
<block wx:else> <!-- <block/> 标签可将多个组件包装起来-->
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <!-- image 媒体组件：图片-->
<text class="userinfo-nickname">{{userInfo.nickName}}</text> <!-- image 文本组件；userinfo-nickname：昵称容器，在index.wxss中设置样式-->
</block>
</view>
<view class="usermotto"> <!-- image 签名容器，在index.wxss中设置样式-->
<text class="user-motto">{{motto}}</text>
</view>
</view>
- .wxss：コンテナークラスに応じて、ページスタイルを調整して視覚効果を向上させます。
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%; //圆形为50%，小于50%为圆角
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px; //外边框顶部与其他容器外边框间隔200px
}
こんにちは世界！
最も単純なhello worldは1行のコードで実現できます。まず、logsディレクトリを含むProject.config.json以外のファイルのコンテンツを削除し、次にapp.json、index.js、index.wxmlで削除します次のコードを入力して、ハローワードを達成できます。
{"pages":[ "pages/index/index"]}
Page({})<text>hello world!</text>難易度を少しずつ上げて、hello worldの上級バージョンを完成させましょう。最初に変数を紹介し、Pageクラスのdata属性にhello変数を追加して、値を割り当てます。次に、{{}}を使用して使用します。
Page({
/**
* 页面的初始数据
*/
data: {
hello:"hello world!"
}
}<view>{{hello}}</view>背景色の変更、フォントの変更など、helloワードのスタイルを変更できます。まず、コンテナにhelloという名前を付けてから、スタイルを設定します。
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
</view>.hello_group{
background: #0c960c; //将鼠标放在#0c960c，会弹出色谱，可以根据这个选择自己喜欢的颜色
width: 750rpx;
height: 750rpx;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}WeChatアプレットのビューコンテナーは、ブロックとフレックスの2つのレイアウトメソッドをサポートしています。ここでは、フレックスレイアウトを導入して、Hello Worldを投げます。ここでは、テキストを水平および垂直の中央に配置し、水平方向を主軸として左から右に選択します。
.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}helloとwordという2つのコンテナーにhello worldを入れ、Flexレイアウトを使用します。
Page({
data: {
hello:"你好",
world:"世界"
}
）<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}次に、画像コンポーネントを使用して、アプレットに世界の写真を提供できます。レイアウトがめちゃくちゃになっているのがわかりましたので、修正してみましょうまだ醜いですが、今までよりずっと良さそうです。
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap; //换行
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50% //圆形
}下にある多くの空白は、強迫性障害の患者を非常に不快にし、何かを追加してから、スライディングウィンドウを追加します。私たちの惑星の簡単な紹介など、テキストを追加しましょう。まず、百度百科事典のテキストを少しコピーします。「地球は太陽系の8つの惑星の1つです。太陽から近い順から遠い順で3番目にランクされています。また、直径、質量、密度が太陽系で最も地球上の惑星です。太陽から1億5000万キロの距離にあり、地球は太陽の周りを公転しながら西から東に自転しています。現在の年齢は40億から46億年です。[1]自然の衛星-月を持ち、2つは天体システム-地球-月システムを形成します。起源は46億年前の原始太陽系星雲です。地球の赤道半径は6378.137 km、極半径は6536.752 km、平均半径は約6371 kmです。赤道円周は約40076 kmで、不規則で、赤道がわずかに平らで、極がわずかに膨らんでいます。楕円球。地球の表面積は5億1000万平方キロメートルで、そのうち71％が海、29％が陸です。地球は宇宙空間では青く見えます。地球の内部にはコア、マントル、シェル構造があり、地球の外には水圏、大気、磁場があります。地球は現在、宇宙で生命を持っていることが知られている唯一の天体であり、人間を含む何百万もの生物の本拠地です。ステータスバーを再設定してください。
.hello_group{
background: #0c960c;
width: 750rpx;
height: 700rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50%
}
.brif_group{
margin-top: 20rpx;
margin-bottom: 80rpx;
margin-left: 20rpx;
margin-right: 20rpx;
}
.brif_title{
color: #13b3e4;
margin-bottom: 20rpx;
font-size: 50rpx;
}
.brif_content{
font-size: 25rpx;
}
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>
<view class = "brif_group">
<view class = "brif_title">地球（Earth）</view>
<text class = "brif_content">太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米，极半径6356.752千米，平均半径约6371千米，赤道周长大约为40076千米，呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里，其中71%为海洋，29%为陆地，在太空上看地球呈蓝色。地球内部有核、幔、壳结构，地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体，是包括人类在内上百万种生物的家园。
</text>
</view>app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Hello",
"navigationBarTextStyle": "black"
}
}
まだ多くの未記述があり、次の記事に進み、あまりに疲れているように見え、学習を始めたばかりです。基本的な操作は、多数のコンテナーを記述し、コンテナーに入力して、スタイルを設定することだと思います。
参考資料
