Article directory
1. User login
1.1 Send SMS
1.2 Login
-
applet public object
-
app.js
App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { }, globalData:{ userInfo: null, } }) -
Other pages operate public values
var app = getApp(); Page({ data: { }, onShow:function(){ app.globalData } });Note: After modifying globalData, the values used by other pages will not change automatically, but need to be set manually.
-
-
local storage operations
wx.getStorageSync('userInfo'); wx.setStorageSync('userInfo',"sdfsfd"); wx.removeStorageSync("userInfo") -
page call stack
var pages = getCurrentPages(); prevPage = pages[pages.length-2]; -
Jump back to the previous page
wx.navigateBack({ }); -
Mini Program Page Life Cycle
- onLoad (once)
- onShow (as long as this page is displayed, it will automatically load)
- onReady (once)
- onHide (automatically loaded every time the page is hidden,)
- onUnload (unload the page, close the applet)
-
global app.js
App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { }, globalData:{ userInfo: null, } }) -
wx:if directive
2. Page pass value
2.1 Passing values from parent page to child page
Parent page:
/pages/xx/xxx?id=1
Subpage
onLoad:function(option){
}
2.2 Child parent page
Subpage
var pages = getCurrentPages();
var prevPage = pages[pages.length-2];
// prevPage.setData({ topicText:topicInfo.title });
Note: data-xx can pass values to events.
3. Object Storage of Tencent Cloud
- The first stage: file server, which stores files on a certain server (division of directory structure).
- second stage:
- File storage, store files on a certain server (division of directory structure).
- Object storage, optimized storage and operational optimization (does not support directory structure partitioning).
- The third stage: cloud services (Ali/Tencent/Qiniu/Amazon)
- file storage
- object storage
3.1 Quick use
- Registration related information
- development documentation
4. Post
4.1 Issues with the release process
-
method one
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); } -
Method 2 (recommended)
1. 打开图片进行本地预览 2. 将本地图片上传到 腾讯云对象存储中COS 3. 输入文字 & 选择相应的信息 4. 发布： 必须上传完毕之后，才允许点击发布按钮。
4.2 Component: Progress Bar
<progress percent="{
{percent1}}" ></progress>
<progress percent="{
{percent2}}" activeColor="#DC143C" ></progress>
4.3 Modify local data in 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 Closures
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 Mini Program
-
choose picture
-
fill in the content
-
submit
{ 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 Rules
{
k1:v1,
k2:v2,
k3:{
...},
k4:[
{
....}
]
}
5. Restful API Review
5.1 APIView (can)
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 User passes some value
When you create a user, you generate a UID in the background yourself.
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 What is the difference between fields and exclude?
Display data through fields and exclude custom pages.
Requirement: Only display the data of the id, name, and age of the user table, and the others are not displayed.
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},
]
Requirements: The database has 5 fields and 7 fields are displayed.
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
Don't add it, you need it when viewing.
Requirement: Write two interfaces to add (3 fields), get a list (5 fields)
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 Complex requirements
Use a serializer when adding, and a serializer when listing
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 Nested 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