ミニプログラムの基本機能

基本的に、WeChatアプレットはWeChatブラウザのH5ページで実行されており、主なプログラミング方法はjs / cssです。アプレットの全体的な構造もページに従って編成されていますが、アプリの概念がページに追加されています。：エントリ、構成、およびグローバル変数ストレージを管理します。

アプレットのファイル構造は
H5とは異なり、アプレットのファイル編成はHTMLファイルを4つのファイルに分割します。通常のhtml、css、およびcssに対応する4つの拡張子を持つwxml、wxss、json、およびjsファイルです。 htmlページ。jsonとjs。

wxmlの構文は、標準のhtmlの構文とはかなり異なります。アプレットの基本的なタグビューがHTMLのdivタグに置き換わり、画像、アイコン、スライダーなどの他のタグも、の開発スタイルとより密接に関連しています。アプレット。
詳細については、ミニプログラムの公式開発者ウェブサイトhttps://developers.weixin.qq.com/miniprogram/dev/component/を参照してください。
アプレットホスティングサービスは
H5とは異なります。アプレットのページファイルとリソースファイルはWeChatサーバーでホストされます。ファイルはコンパイルされるたびにホスティングサーバーにアップロードされ、携帯電話はコードをスキャンしての開発ステータスをダウンロードします。テスト用のアプレット。そしてデバッグ
ミニプログラムの関連付けと公開
ミニプログラムの開発と公開は統合されています。ユーザーは最初にミニプログラムアカウントを登録し、ミニプログラムアカウントの元のIDを開発プロジェクトのproject.config.jsonのappidに構成して、開発プロジェクトと出版ミニプログラム協会。アプレット開発ツールをコンパイルしてアップロードすると、アプレットアカウントのバックグラウンドで開発されたアプレットを確認できます。
メールに登録できるミニプログラムアカウントは1つだけであることに注意してください。開発者アカウントの登録に関する一般的な理解とは異なります。一般的に、最初に開発者アカウントを登録し、次に開発者アカウントで自分で開発したすべての小さなプログラムを管理することを理解しています。
ミニプログラムとWeChatオフィシャルアカウントの関係ミニプログラムとWeChatオフィシャルアカウントの関係はなく、両者は独立しています。H5とは異なり、H5ページは公式アカウントでのみ認証でき、WeChatミニプログラムと公式アカウントのステータスは同じです（ミニプログラムの登録とログインの入り口も公式アカウントと同じです）：https：/ /mp.weixin.qq.com/）、アプレットが認証された後、アプレットとしてユーザー認証を直接取得できます。WeChatの公式アカウントとミニプログラムの間に弱い関係が確立される可能性があります。WeChatのバックグラウンドで記事をプッシュするときに関連するミニプログラムを挿入するように制限されています。または、ミニプログラムは、ユーザーが自分の他の公式アカウントに注意を払うことを推奨します。ページ上の開発者。
H5を使用して小さなプログラムをすばやく開発します。小さなプログラム
の特別な機能を使用する必要がない場合（たとえば、カメラを使用してユーザーの電話番号を取得する必要がある場合など）、HTML5を直接使用して小さなプログラムページ（httpsサーバーにデプロイする必要があります）、次に小さなプログラム内プログラムでは、H5ページはWebビュータグを介して直接参照され、H5パッケージングアプレットをすばやく開発します。

<!--pages/h5/h5.wxml-->
<view>
  <view>
    <web-view src="https://app.creativestar.cn/piaget/index.html#wechat_redirect"></web-view>
 </view>
</view>

H5ページがWebビューに導入された後、H5ページがウィンドウ全体を占めることに注意してください。つまり、H5とアプレットのプログラミングを混在させることはできません。
ここに画像の説明を挿入
ただし、良いニュースは、アプレットに埋め込まれたH5ページが、リンクを介してアプレットの他のページに簡単にジャンプできることです。小さなプログラムを使用して、機能ページをネイティブに開発し、H5を介して他の登録、情報表示、および他のページを開発し、混合開発を通じて開発効率を向上させることができます。

<script>
    $("h1").click(function () {
    
    
        wx.miniProgram.navigateTo({
    
     url: "/pages/index/index?param=value" });
    });
</script>

ミニプログラム開発前の準備

ミニプログラム開発ツールのダウンロード
WeChatミニプログラムは、ファイル管理、プレビュー、デバッグ、アップロード、および公開機能を提供する特別な開発エディターを提供します。
2.
小さなプログラムを開発する前にhttps開発サーバーを構成します。httpsサーバーも準備する必要があります。各小さなプログラムに割り当てられるホスティングスペースはわずか2Mであるため、余分なリソースを独自のhttpsサーバーに保存する必要があります。 httpsプロトコルUseを介して小さなプログラムによって呼び出されるか、H5ページの形式でアプレットを直接埋め込みます。
https外部リソースを使用する前に、アプレットのバックグラウンドを介して安全なドメイン名を構成する必要があります
アプレットのデュアルスレッドロジックを理解するアプレットとH5の最大の違いは、レンダリングモードの違いです。アプレットはデュアルスレッド操作と呼ばれ、ページのレンダリングとスクリプトの実行は2つの別々のスレッドで実行されます。このページには、H5で開発されたものとは異なるいくつかの小さなプログラムがあります。

wx：レンダリング命令
アプレットコードを初めて開いたときの最も明らかな違いは、wxの先頭にあるレンダリング命令です。

<image wx:if="{
     
     {showOverlay}}" src="/images/arrow_left.png" bind:tap="back" style="position: absolute; width: 60rpx; height: 60rpx; top: 30rpx; left: 30rpx; z-index: 30;"></image>

wx：if判定命令、ifの計算結果がtrueの場合、ラベルをレンダリングします。それ以外の場合はレンダリングしません。これの利点は、レンダリングコードとロジックコードが分離されていることです。ロジックコードは、jqueryのような$（。class）を使用して特定のタグを選択したり、ラベルの表示スタイルを変更したりする必要はありませんが、注意を払うだけで済みます。ロジックに変数値を変更すると、レンダリングレイヤーは自動的に変数値を渡します。レンダリングスタイルを決定します。
その他の手順には、wx：else wx：for wx：keyなどがあります。

{ {}}データバインディング
WeChatアプレットページでは、{ {}}二重中括弧を使用して変数をページに導入し、変数の計算結果を表示できます。
といった：

変数計算結果により選択状態を変更

<view id="select">
    <view class="select {
     
     {SELECT_TYPE.IMAGE === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.IMAGE}}" bind:tap="selectContent">图片</view>
    <view class="select {
     
     {SELECT_TYPE.VIDEO === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.VIDEO}}" bind:tap="selectContent">视频</view>
</view>

変数を使用してページに表示されるテキストを変更します

<text class="userinfo-nickname">{
   
   {userInfo.nickName}}</text>

bind：イベントバインディング
bind：その後にbind：tap（タップ）、bind：longtap（長押し）、bind：change（入力変更）などのバインドされたイベントの名前が続きます。bind：eventも記述できます。 bindtap、bindlongtap、bindchangなどのbindeventとして直接、混乱しているようです。

<view id="select">
    <view class="select {
     
     {SELECT_TYPE.IMAGE === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.IMAGE}}" bind:tap="selectContent">图片</view>
    <view class="select {
     
     {SELECT_TYPE.VIDEO === selectType ? 'selected': ''}}" data-contentType="{
     
     {SELECT_TYPE.VIDEO}}" bind:tap="selectContent">视频</view>
</view>

アプレットのいくつかの落とし穴

レンダリングとロジックデュアルスレッドの同期

一般的に、レンダリングとロジック実行を分離すると、コードがより簡潔になります。ただし、この方法には欠点があります。レンダリングレイヤーとロジックレイヤーは異なるスレッドで並行して実行されるため、同期の問題により、ページのティアリングやちらつきが発生します。
たとえば、データバインディングを使用すると、シーケンスフレームのレンダリングを簡単に実現できます。

WXML

<view class="start">
    <image id="start" mode="widthFix" src="{
     
     {picSrc}}"></image>
</view>

JS

    onLoad: function () {
    
    
        let that = this;
        var i = 0;
        setInterval(function() {
    
    
            that.setData({
    
    picSrc: "/images/pic_" + fix(i, 4) + ".png"});
            ++i;
            if (i>=that.picCount) {
    
    
                i = 0;
            }
        }, 40, null)
    }

しかし、実際の実行結果は、シーケンスフレーム画像がちらつき続け、まったく使用できないということです。アプレットのレンダリングとロジック分離のデュアルスレッド実装には、まだ最適化の余地がたくさんあるようです。

背景画像はローカル画像リソースを使用できません

css属性のbackground-imageは、指定された絶対パスであるかどうかに関係なく、ローカルパスの画像リソースを指定できません。

background-image: url(/image/backgnd.png);

または相対パス

background-image: url(../image/backgnd.png);

画像をレンダリングできません。サーバー上の絶対アドレス画像のみを指定できます

background-image: url(https://app.creativestar.cn/image/backgnd.png);

または、代わりに画像タグを使用してください

<image class="backgnd" src="/image/backgnd.png" mode="cover"></image>

setDataを使用してバインドされた変数に値を割り当てるに
は、アプレットの各ページでデータデータのセットを定義します

Page({
    
    
    data: {
    
    
        showOverlay: true,
        showContent: false,
        selectType: SELECT_TYPE.NONE,
    },

データデータ構造で定義されたデータは、ページバインディング変数に使用されます。フロントエンドページで{ {変数名}}を使用して、変数値を直接参照します。jsの文法によると、this.data.variableを直接使用して値を直接割り当てることができますが、割り当てが変更された後、フロントエンドは変更されません。ケースコードのアプレットは、変数値を変更するためのthis.setData関数を提供します。

        this.setData({
    
    
            showOverlay: true,
            showContent: true,
            selectType: SELECT_TYPE.VIDEO,
        });

アプレットページとスクリプトは2つのスレッドで実行されるため、実際の実装では、ページとスクリプトの2つのスレッドがそれぞれデータのコピーを格納し、setData関数を使用してスレッド間でデータを転送すると推測されます。

WeChatミニプログラムエントリーの注意事項

ミニプログラムエントリーに関する注意事項

ミニプログラムの基本機能

ミニプログラム開発前の準備

アプレットのいくつかの落とし穴

おすすめ