【WeChatミニプログラム】ミニプログラム機能開発

ここに画像の説明を挿入

記事ディレクトリ

1. ユーザーログイン

1.1 SMS の送信

1.2 ログイン

アプレット公開オブジェクト

app.js

App({
        
        

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
        
        

  },
  globalData:{
        
        
    userInfo: null, 
  }
})

他のページは公開値を操作します

var app = getApp();
Page({
        
        
	data: {
        
        
  	},
  	onShow:function(){
        
        
  		app.globalData
  	}
});

注: globalData を変更した後、他のページで使用される値は自動的には変更されませんが、手動で設定する必要があります。

ローカルストレージ操作

wx.getStorageSync('userInfo');
wx.setStorageSync('userInfo',"sdfsfd");
wx.removeStorageSync("userInfo")

ページコールスタック

var pages = getCurrentPages();
prevPage = pages[pages.length-2];

前のページに戻る
```
wx.navigateBack({
      
      });
```
ミニプログラムページのライフサイクル
- オンロード (1 回)
- onShow (このページが表示されている限り、自動的に読み込まれます)
- onReady (1 回)
- onHide (ページが非表示になるたびに自動的に読み込まれます)
- onUnload (ページをアンロードし、アプレットを閉じます)

グローバル app.js

App({
      
      

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
      
      

  },
  globalData:{
      
      
    userInfo: null, 
  }
})

wx:if ディレクティブ

2.ページパス値

2.1 親ページから子ページへの値の受け渡し

親ページ:

/pages/xx/xxx?id=1

サブページ

onLoad:function(option){
    
    
	
}

2.2 子親ページ

サブページ

var pages = getCurrentPages();
var prevPage = pages[pages.length-2];
// prevPage.setData({ topicText:topicInfo.title });

注: data-xx はイベントに値を渡すことができます。

3. Tencent Cloudのオブジェクトストレージ

第 1 段階: 特定のサーバー (ディレクトリ構造の分割) にファイルを格納するファイルサーバー。
第2段：
- ファイルストレージ、特定のサーバーにファイルを保存します（ディレクトリ構造の分割）。
- オブジェクトストレージ、最適化されたストレージ、および運用の最適化 (ディレクトリ構造のパーティション分割はサポートしていません)。
第 3 段階: クラウドサービス (Ali/Tencent/Qiniu/Amazon)
- ファイルストレージ
- オブジェクトストレージ

3.1 クイック使用

登録関連情報
開発ドキュメント

4.投稿する

4.1 リリースプロセスに関する問題

方法1

1. 打开图片进行本地预览
2. 输入文字 & 选择相应的信息
3. 点击发布按钮
	3.1 将本地图片上传到 腾讯云对象存储中COS（oss），并将COS中的图片地址返回。
	3.2 将COS中的图片URL和文字等信息一起提交到后台。
BUG：
	在3.2步骤时可能拿不到COS中的图片。

function onClickSubmit(){
      
      
    // 耗时1分钟，不会阻塞。
    wx.request({
      
      
        url:"...",
        success:function(res){
      
      
            console.log(res)
        }
    })
    console.log(123);
}

方法 2 (推奨)

1. 打开图片进行本地预览
2. 将本地图片上传到 腾讯云对象存储中COS
3. 输入文字 & 选择相应的信息
4. 发布：
	必须上传完毕之后，才允许点击发布按钮。

4.2 コンポーネント: プログレスバー

<progress percent="{
    
    {percent1}}"  ></progress>

<progress percent="{
    
    {percent2}}" activeColor="#DC143C" ></progress>

4.3 データ内のローカルデータの変更

<view>-----案例------</view>
<view>点击按钮完成，将图片1的进度条更新为80%</view>
<view wx:for="{
     
     {imageList}}">
  <view>{
   
   {item.title}}</view>
  <progress percent="{
     
     {item.percent}}"  ></progress>
</view>

<button bindtap="changePercent" >点击</button>

  data: {
    
    
    percent1:20,
    percent2:50,
    imageList:[
      {
    
    id:1,title:"图片1",percent:20},
      {
    
     id: 1, title: "图片2", percent: 30 },
      {
    
     id: 1, title: "图片3", percent: 60 },
    ]
  },
  changePercent:function(){
    
    
    // 方式1：错误
    /*
    this.setData({
      imageList[0].person: 80
    });
    */
    
    // 方式2：可以，由于需要全部修改，所以性能差。
    /*
    var dataList = this.data.imageList;
    dataList[0].percent = 80;
    this.setData({
      imageList: dataList
    });
    */
    
    // 方式3：推荐
    var num = 2;
    this.setData({
    
    
      ["imageList[0].percent"]:80,
      ["imageList[" + num + "].percent"]: 90,
      ["imageList[1].title"]:"突突突突突"
    })

  },

4.4 閉鎖

var dataList = ["alex", "changxin", "cck"]
for (var i in dataList) {
    
    
  (function(data){
    
    
    wx.request({
    
    
      url: 'xxxxx',
      success: function (res) {
    
    
        console.log(data);
      }
    })
  })(dataList[i])
}

4.5 ミニプログラム

絵を選ぶ
内容を記入してください

参加する

{
      
      
	cover:"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828.png",
	content:"小程序开发太简单了",
	address:"北京市",
	topic:1,
	images:[
		"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828.png",
		"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828.png"
	]
}

{
      
      
	cover:"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828.png",
	content:"小程序开发太简单了",
	address:"北京市",
	topic:1,
	
	
	
	images:[
		{
      
      
			path:"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828.png",
			cos_key:"08a9daei1578736867828.pn"
		},
		{
      
      
			path:"https://mini-1251317460.cos.ap-chengdu.myqcloud.com/08a9daei1578736867828.png",
			cos_key:"08a9daei1578736867828.pn"
		},
	]
}

4.6 API

from rest_framework.views import APIView
from rest_framework.generics import CreateAPIView
from rest_framework import serializers
from apps.api import models
class NewsDetailModelSerializer(serializers.Serializer):
    key = serializers.CharField()
    cos_path = serializers.CharField()
    
class NewsModelSerializer(serializers.ModelSerializer):
    images = NewsDetailModelSerializer(many=True)
    class Meta:
        model = models.News
        fields = "__all__"

class NewsView(CreateAPIView):
    """ 创建动态的API """
    serializer_class = NewsModelSerializer

class News(models.Model):
    """
    动态
    """
    cover = models.CharField(verbose_name='封面', max_length=128)
    content = models.CharField(verbose_name='内容', max_length=255)
    topic = models.ForeignKey(verbose_name='话题', to='Topic', null=True, blank=True)
    address = models.CharField(verbose_name='位置', max_length=128, null=True, blank=True)

    user = models.ForeignKey(verbose_name='发布者', to='UserInfo', related_name='news')

    favor_count = models.PositiveIntegerField(verbose_name='赞数', default=0)

    viewer_count = models.PositiveIntegerField(verbose_name='浏览数', default=0)

    comment_count = models.PositiveIntegerField(verbose_name='评论数', default=0)

    create_date = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)

class NewsDetail(models.Model):
    """
    动态详细
    """
    key = models.CharField(verbose_name='腾讯对象存储中的文件名', max_length=128, help_text="用于以后在腾讯对象存储中删除")
    cos_path = models.CharField(verbose_name='腾讯对象存储中图片路径', max_length=128)
    news = models.ForeignKey(verbose_name='动态', to='News')

4.7 ルール

{
    
    
    k1:v1,
    k2:v2,
    k3:{
    
    ...},
    k4:[
        {
    
    ....}
    ]
}

5.安らかなAPIレビュー

5.1 APIView (できる)

from rest_framework.response import Response
class UserModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.UserInfo
        fields = "__all__"

class UserView(APIView):

    def get(self,request,*args,**kwargs):
        user_list = models.UserInfo.objects.all()
        ser = UserModelSerializer(instance=user_list,many=True)
        return Response(ser.data)

    def post(self,request,*args,**kwargs):
        ser = UserModelSerializer(data=request.data)
        if ser.is_valid():
            # models.UserInfo.objects.create(**ser.validated_data)
            ser.save(user_id=1)
            return Response(ser.data)
        return Response(ser.errors)

5.2 リスト APIView

ListAPIView,CreateAPIView,RetrieveAPIView,UpdateAPIView,DestroyAPIView

class NewTestModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.News
        fields = "__all__"

class NewTestView(CreateAPIView,ListAPIView):
    serializer_class = NewTestModelSerializer
    queryset = models.News.objects.filter(id__gt=4)

5.2.1 ユーザーが何らかの値を渡す

ユーザーを作成するときは、バックグラウンドで自分で UID を生成します。

class NewTestModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.News
        fields = "__all__"

class NewTestView(CreateAPIView,ListAPIView):
    serializer_class = NewTestModelSerializer
    queryset = models.News.objects.filter(id__gt=4)

    def perform_create(self, serializer):
        serializer.save(uid=str(uuid.uuid4()))

5.2.2 フィールドと除外の違いは何ですか?

フィールドを介してデータを表示し、カスタムページを除外します。

条件: user テーブルの id、name、age のデータのみを表示し、それ以外は表示しない。

class NewTestModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.News
        # fields = ["id","name",'age']
        # fields = "__all__"
        exclude = ['gender']

class NewTestView(ListAPIView):
    serializer_class = NewTestModelSerializer
    queryset = models.User.objects.all()
    
[
    {
    
    id:1,name:'xxx',age:18},
    {
    
    id:1,name:'xxx',age:11},
    {
    
    id:1,name:'xxx',age:99},
]

要件: データベースには 5 つのフィールドがあり、7 つのフィールドが表示されます。

class NewTestModelSerializer(serializers.ModelSerializer):
    xx = serializers.CharField(source='id')
    x1 = serializers.SerializerMethodField()
    class Meta:
        model = models.News
        # fields = "__all__"
        # fields = ['id','name','age','gender','phone','xx','x1']
        exclude = ['id','name']
	
    def get_x1(self,obj):
        return obj.id
    
class NewTestView(ListAPIView):
    serializer_class = NewTestModelSerializer
    queryset = models.User.objects.all()
    
[
    {
    
    id:1,name:'xxx',age:18...   xx:1,x1:1},
    {
    
    id:2,name:'xxx',age:11...   xx:2,x1:2},
    {
    
    id:3,name:'xxx',age:99,     xx:3,x1:3},
]

5.2.3 読み取り専用

追加しないでください。表示するときに必要です。

要件: 追加する 2 つのインターフェイスを記述 (3 フィールド)、リストを取得 (5 フィールド)

class NewTestModelSerializer(serializers.ModelSerializer):
    # phone = serializers.CharField(source='phone',read_only=True)
    # email = serializers.CharField(source='email',read_only=True)
    class Meta:
        model = models.News
        fields = "__all__"
        read_only_fields = ['phone','email',]
        
class NewTestView(CreateAPIView, ListAPIView):
    serializer_class = NewTestModelSerializer
    queryset = models.User.objects.all()
    
添加：
	{
    
    
        name:'xx',
        age:'19',
        gender:1
    }
获取：
	[
        {
    
    name:'xx',age:'xx',gender:'',phone:'xx',email:xxx}
    ]

5.2.4 複雑な要件

追加するときはシリアライザーを使用し、リストするときはシリアライザーを使用します

class NewTestModelSerializer1(serializers.ModelSerializer):
    class Meta:
        model = models.News
        fields = "__all__"
        
class NewTestModelSerializer2(serializers.ModelSerializer):
    class Meta:
        model = models.News
        fields = "__all__"

class NewTestView(CreateAPIView, ListAPIView):
    queryset = models.User.objects.all()
    
	def get_serializer_class(self):
        if self.request.method == 'POST':
            return NewTestModelSerializer1
        if self.request.method == 'GET':
            return NewTestModelSerializer2

5.2.5 ネストされたシリアライザ

class CreateNewsTopicModelSerializer(serializers.Serializer):
    key = serializers.CharField()
    cos_path = serializers.CharField()


class CreateNewsModelSerializer(serializers.ModelSerializer):
    imageList = CreateNewsTopicModelSerializer(many=True)

    class Meta:
        model = models.News
        exclude = ['user', 'viewer_count', 'comment_count',"favor_count"]

    def create(self, validated_data):
        # 把imageList切走
        image_list = validated_data.pop('imageList')

        # 创建New表中的数据
        news_object = models.News.objects.create(**validated_data)

        data_list = models.NewsDetail.objects.bulk_create(
            [models.NewsDetail(**info, news=news_object) for info in image_list]
        )
        news_object.imageList = data_list

        if news_object.topic:
            news_object.topic.count += 1
            news_object.save()

        return news_object

class NewsView(CreateAPIView):
    """
    发布动态
    """
    serializer_class = CreateNewsModelSerializer
    def perform_create(self, serializer):
        # 只能保存：News表中的数据（）
        # 调用serializer对象的save（先调用create）
        new_object = serializer.save(user_id=1)
        return new_object