【微信小程序】小程序功能开发

快来打我* 2024-04-01 09:16 62阅读 0赞

![在这里插入图片描述][5c1311f37b4f4d35bc8b87d24d718292.jpeg_pic_center]

#### 文章目录 ####

*   *  1. 用户登录
     *   *  1.1 发送短信
         *  1.2 登录
     *  2. 页面传值
     *   *  2.1 父页面向子页面传值
         *  2.2 子父页面
     *  3. 腾讯云的对象存储
     *   *  3.1 快速使用
     *  4. 发布
     *   *  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 组件：进度条 ####

#### 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。

##### 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

[5c1311f37b4f4d35bc8b87d24d718292.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fdace62026e44d7cb7355e3f161de4ec.jpeg