ミニプログラム開発の難しさは何ですか?

王林
リリース: 2020-12-16 09:19:18
転載
4348 人が閲覧しました

ミニプログラム開発の難しさは何ですか?

この記事では、小さなプログラムを開発するための難しい知識をいくつか列挙します。皆様のお役に立てれば幸いです。

(学習ビデオの共有: プログラミング ビデオ)

1. ミニ プログラムが QR コードを生成します

ミニ プログラムが QR コードを生成します ミニ プログラムが 2 つの QR を生成しますコードは実際にはバックエンドによって呼び出される必要があり、その後フロントエンドがバックエンド インターフェイスを呼び出すことができます。

次の例では、追加のパラメーターをバックエンド シーンに渡します (最大長は 32 文字で、数字、大文字と小文字の英語、およびいくつかの特殊文字のみをサポートします: !#$&'()*, / :;=?@-._~, 開いたアプレットで使用されるその他の文字は、自分で有効な文字にエンコードしてください)。

    let scene = 't=3&n='+ this.inputVal+'&sale='+this.saleId;
    request(qcode,{isHyaline:false,qrcodeType:2,scene:scene,width:255,color:{r:'255',g:'255',b:'255'}})
      .then(res=>{})
    })
ログイン後にコピー

ここでの落とし穴は、フロントエンドが QR コードをスキャンしてユーザーのパラメーターを取得する方法です

  onLoad(opts){
    var scene = decodeURIComponent(opts.scene); // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
     
  }
ログイン後にコピー

2. ミニ プログラムはミニ プログラムにジャンプします

ミニ プログラムMiniProgram を呼び出します。ここでは、単純なパッケージを作成します。

function toMiniProgram(appid, path, extraData) {
  wx.navigateToMiniProgram({
    appId: appid,  // 要打开的小程序 appId
    path: path,   // 打开的页面路径
    envVersion: 'develop',  //要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。
    extraData: extraData,  // 需要传递给目标小程序的数据
    success: function (res) {
      console.log('打开成功')
    },
    fail: function (res) {}
  })
}
ログイン後にコピー

ページで

 toMiniProgram('appid','pages/customer/goods-detail?id='+id+'&saleId='+this.saleId,{});
ログイン後にコピー

を使用して、別の小さなプログラムのパラメータを取得します。

onLoad(opts){
    this.goodsId=opts.id
    this.saleId=opts.saleId
}
ログイン後にコピー

3. 天井効果の実装

天井効果の原理は、特定の高さまでスクロールされたタブを固定の

html

<view class="tab-ctn">
  <view class="tabs flex flex-justify {{isTabFixed?&#39;fixed&#39;:&#39;&#39;}}" id="tabs">
    <view class="item pr {{tabIndex===0?&#39;on&#39;:&#39;&#39;}}" @tap="toggleTab(0)">商品介绍</view>
    <view class="item pr {{tabIndex===1?&#39;on&#39;:&#39;&#39;}}" @tap="toggleTab(1)">规格参数</view>
  </view>
</view>
ログイン後にコピー

css

.tabs{  padding:0 176rpx;
        font-size:30rpx;
        height:90rpx;
        border-bottom:0.5px solid #E4E4E4;}
.item{
    height:100%;
    position:relative;
    padding-top:20rpx;
    color:#999;
    &.on{
    color:#FD343B;
    font-weight:bold;
    }
}
.fixed{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:9;
}
ログイン後にコピー

js

に再配置することです。
data={
    detailTopH:300, 
}
onLoad(){
    this.getElHeight(&#39;&#39;) // tab上面元素的高度
}
/**封装根据id获取元素高度 */
getElHeightById(id){
  return new Promise(function(resolve,reject){
    const query = wx.createSelectorQuery()
    query.select(&#39;#&#39;+id).boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      resolve(res[0].height)
    })
  })
}
// 调用
  getElHeight(id){
    this.getElHeightById(id).then(res=>{
      this.detailTopH = res
    })
  }
/**监听页面滚动事件 */
  onPageScroll(e){
    if(e.scrollTop>=this.detailTopH && !this.isTabFixed){
      this.isTabFixed=true
    }else if(e.scrollTop<=this.detailTopH && this.isTabFixed){
      this.isTabFixed=false
    }
  }
ログイン後にコピー

4 、カプセル化タイムスタンプ

function formatTime(timestamp, type = "date") {
  var date = new Date(timestamp);
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()
 
  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()
  if (type == "date") {
    return [year, month, day].map(formatNumber).join(&#39;-&#39;);
  } else if (type == "all") {
    return [year, month, day].map(formatNumber).join(&#39;-&#39;) + &#39; &#39; + [hour, minute, second].map(formatNumber).join(&#39;:&#39;)
  } else if (type == "time") {
    return [hour, minute, second].map(formatNumber).join(&#39;:&#39;)
  } else if (type == "time2") {
    return [hour, minute].map(formatNumber).join(&#39;:&#39;)
  } else if (type == &#39;month&#39;) {
    return [month, day].map(formatNumber).join(&#39;-&#39;);
  }
 
}
/**niu 封装时间戳格式化辅助,将年月日先转为字符串,再判断是否加0*/
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : &#39;0&#39; + n
}
 
formatTime(1236547891,&#39;all&#39;) // 2019-11-02 03:11:11
formatTime(1236547891,&#39;time&#39;)  // 03:11:22
formatTime(1236547891,&#39;time2&#39;)  // 03:11
formatTime(1236547891,&#39;month&#39;)  // 03-03
formatTime(1236547891,&#39;date&#39;)  // 2019-11-02
ログイン後にコピー

関連する推奨事項:小さなプログラム開発

以上がミニプログラム開発の難しさは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!