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

文章目录

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 组件：进度条

<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.Newsfields = "__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.UserInfofields = "__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.Newsfields = "__all__"class NewTestView(CreateAPIView,ListAPIView):serializer_class = NewTestModelSerializerqueryset = models.News.objects.filter(id__gt=4)

5.2.1 用户传递某些值

创建用户时，自己在后台生成一个UID。

class NewTestModelSerializer(serializers.ModelSerializer):class Meta:model = models.Newsfields = "__all__"class NewTestView(CreateAPIView,ListAPIView):serializer_class = NewTestModelSerializerqueryset = 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 = NewTestModelSerializerqueryset = 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.idclass NewTestView(ListAPIView):serializer_class = NewTestModelSerializerqueryset = 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.Newsfields = "__all__"read_only_fields = ['phone','email',]class NewTestView(CreateAPIView, ListAPIView):serializer_class = NewTestModelSerializerqueryset = 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.Newsfields = "__all__"class NewTestModelSerializer2(serializers.ModelSerializer):class Meta:model = models.Newsfields = "__all__"class NewTestView(CreateAPIView, ListAPIView):queryset = models.User.objects.all()def get_serializer_class(self):if self.request.method == 'POST':return NewTestModelSerializer1if 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.Newsexclude = ['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_listif news_object.topic:news_object.topic.count += 1news_object.save()return news_objectclass NewsView(CreateAPIView):"""发布动态"""serializer_class = CreateNewsModelSerializerdef perform_create(self, serializer):# 只能保存：News表中的数据（）# 调用serializer对象的save（先调用create）new_object = serializer.save(user_id=1)return new_object

【微信小程序】小程序功能开发相关推荐

微信小程序发帖图片功能开发
微信小程序发帖图片功能开发用途:论坛交流里,用户通常会发帖,包含文字和图片前端界面上传界面的前端代码 <f ...
公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
微信企业号多客服功能开发PHP
微信企业号多客服功能开发PHP 思路单客服多客服客服用户对话连接接收文本信息发送文本信息思路 1.点击应用的菜单-在线客服-触发事件 $result1 = $this->receiv ...
java实现微信小程序客服功能开发，后台接受用户发送消息实现关键词自动回复
最近做了一个小程序中间用到了小程序客服功能,主要实现采集用户提问,并且针对关键词自动回复及手动回复.中间踩过很多坑,所也现在记录下来提供给大家. 准备首先准备一个小程序,配置好域名,左边菜单栏目点击 ...
微信开发（3）：微信公众号发现金红包功能开发，利用第三方SDK实现（Java）
最近需求是用户兑换微信红包,需要一些验证,加密,以及证书: 工欲善其事必先利其器感谢前辈的微信SDK 已经维护三年了,还在维护中! 官方文档走一波文档还是一如既往的坑人啊,写的很简单,对简单明 ...
uni-app微信小程序订阅消息功能开发(流程讲解篇)
温馨提示微信小程序中废弃了"模板消息",,微信小程序模板消息使用场景首先我们需要明白微信订阅消息使用场景,比如客户点了一份美团外卖客户需要知道当前订单商家是否接单,或订单是否 ...
java实现微信小程序客服功能开发
第一步:先在后台接入配置URL 官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/custome ...
微信小程序自定义分享功能开发笔记
要在分享的页面中定义onShareAppMessage 方法,只有定义了此事件处理函数,右上角菜单才会显示"转发"按钮 onShareAppMessage触发方式有两种,一种是通过 ...
「小程序JAVA实战」小程序的举报功能开发（68）
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
multipartfile file java 怎么获取里面的属性_「小程序JAVA实战」小程序的举报功能开发（68）...
通过点击举报按钮,跳转到举报页面完成举报操作. 后台开发获取发布人的userId,videoId,创建者的Id controller UserController.java package com. ...

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

文章目录

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 登录

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

【微信小程序】小程序功能开发相关推荐

最新文章

热门文章

5.1 APIView （可以）