【微信小程序】小程序功能开发-蒲公英云

在这里插入图片描述

文章目录

- 1. 用户登录
- - 1.1 发送短信
  - 1.2 登录
- 1. 页面传值
- - 2.1 父页面向子页面传值
  - 2.2 子父页面
- 1. 腾讯云的对象存储
- - 3.1 快速使用
- 1. 发布
- - 4.1 发布流程的问题
  - 4.2 组件：进度条
  - 4.3 修改data中的局部数据
  - 4.4 闭包
  - 4.5 小程序
  - 4.6 API
  - 4.7 规则
- 5.restful api回顾
- - 5.1 APIView （可以）
  - 5.2 ListAPIView
  - - 5.2.1 用户传递某些值
    - 5.2.2 fields和exclude的区别？
    - 5.2.3 read_only
    - 5.2.4 复杂需求
    - 5.2.5 serializers嵌套

1. 用户登录

1.1 发送短信

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({
      });
```
小程序页面的生命周期
- onLoad（一次）
- onShow（只要展示这个页面，就会自动加载）
- onReady（一次）
- 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. 腾讯云的对象存储

第一阶段：文件服务器，将文件存储在某个服务器（目录结构的划分）。
第二阶段：
- 文件存储，将文件存储在某个服务器（目录结构的划分）。
- 对象存储，优化存储和操作优化（不支持目录结构划分）。
第三阶段：云服务（阿里/腾讯/七牛/亚马逊）
- 文件存储
- 对象存储

3.1 快速使用

注册相关信息
开发文档

4. 发布

4.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);
}

方式二（推荐）

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

4.2 组件：进度条

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

4.3 修改data中的局部数据

<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.restful 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 ListAPIView

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 fields和exclude的区别？

通过fields和exclude定制页面展示数据。

需求：只显示用户表的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 read_only

添加时不要，查看时候需要。

需求：编写两个接口添加（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 复杂需求

添加时用一个serializers、列表时用一个serializers

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 serializers嵌套

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