微信小程序基本结构

gslhelloworld

已于 2023-12-19 08:31:33 修改

阅读量1.1k

点赞数 24

分类专栏：微信小程序文章标签：微信小程序小程序 django

于 2023-12-19 07:52:43 首次发布

本文链接：https://blog.youkuaiyun.com/gsl371/article/details/117123895

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

文件目录结构

在这里插入图片描述

app.js 是入口文件。

项目配置文件
在这里插入图片描述

一个页面四个文件
在这里插入图片描述

创建一个页面

在全局配置文件中加一行，即创建一个一个页面，和它的所有文件
在这里插入图片描述
可以 alt+up 或down来移动位置

新建一个小程序项目

填入自己appid

搭建目录结构

在这里插入图片描述

搭建项目页面

在这里插入图片描述

引⼊字体图标

在这里插入图片描述
选取需要的图标字体，加入购物车中。

选择以类方法引入。

在这里插入图片描述
下载此链接

粘贴到这里。

做全局引入
总结

打开阿⾥巴巴字体图标⽹站
选择的图标
添加⾄项⽬
下载到本地
将样式⽂件由 css 修改为 wxss
⼩程序中引⼊

搭建项⽬tabbar结构

新建icon文件夹，把需要的图标放入

在这里插入图片描述

修改app.json
在这里插入图片描述

标签初始化

在这里插入图片描述
定义主题颜色和统一字体大小。

自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

声明一个自定义组件

下面将在首页和其他页面中使用。
在这里插入图片描述

引用这个组件

那个页面使用，就在那个页面引用。
在首页的配置文件声明引用该组件。加入键值对，使用的是相对路径。
在这里插入图片描述

增加组件功能

增加导航标签，和链接。
在这里插入图片描述

修改样式使美观

在这里插入图片描述

请求网络

开发文档

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

在这里插入图片描述

示例代码

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {				//请求参数
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

真实例子

参数接收

export const request=(params)=>{
  // 判断 url中是否带有 /my/ 请求的是私有的路径 带上header token
  let header={...params.header};
  if(params.url.includes("/my/")){
    // 拼接header 带上token
    header["Authorization"]=wx.getStorageSync("token");
  }

发起请求

  return new Promise((resolve,reject)=>{
    wx.request({
     ...params,    //传过来的参数，展开如下所示
     header:header,
     url:baseUrl+params.url,
     success:(result)=>{
       resolve(result.data.message);
     },
     fail:(err)=>{
       reject(err);
     },
     complete:()=>{
      ajaxTimes--;
      if(ajaxTimes===0){
        //  关闭正在等待的图标
        wx.hideLoading();
      }
     }
    });
  })

params参数展开

在这里插入图片描述

参数来源

  // 接口要的参数
  QueryParams:{
    query:"",
    cid:"",
    pagenum:1,
    pagesize:10
  },
  // 总页数
  totalPages:1,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.QueryParams.cid=options.cid||"";
    this.QueryParams.query=options.query||"";
    this.getGoodsList();
  },

参数传入

在这里插入图片描述

首页

轮播图效果

获取轮播图接口数据

在这里插入图片描述

应用轮播图数据

在这里插入图片描述

分类导航图标

导航图标元素来自接口
新建一个分类导航图标数据模型，将数据存入其中。
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
接口请求增加分页?/limit=4&offset=4*(n-1) ,n 为页码。需要拼接下字符串。
js和wxml使用循环获得数据来展示。

列表页面

触底加载和下拉刷新

在这里插入图片描述

图片上传

postman
在这里插入图片描述
前端代码

// 提交按钮的点击
  handleFormSubmit() {
    // 1 获取文本域的内容 图片数组
    const { textVal, chooseImgs } = this.data;
    // 2 合法性的验证
    if (!textVal.trim()) {
      // 不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      });
      return;
    }
    // 3 准备上传图片 到专门的图片服务器 
    // 上传文件的 api 不支持 多个文件同时上传  遍历数组 挨个上传 
    // 显示正在等待的图片
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });
    // 判断有没有需要上传的图片数组
    if (chooseImgs.length != 0) {
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // 图片要上传到哪里
          url: 'http://192.168.2.21:8000/news/image_upload',
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称 后台来获取文件  file,对象的key，图片保存路径为值。
          name: "image",
          // 顺带的文本信息
          formData: {},
          success: (result) => {
            console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);
            // 所有的图片都上传完毕了才触发  
            if (i === chooseImgs.length - 1) {
              wx.hideLoading();
              console.log("把文本的内容和外网的图片数组 提交到后台中");
              //  提交都成功了
              // 重置页面
              this.setData({
                textVal: "",
                chooseImgs: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
          }
        });
      })
    }else{
      wx.hideLoading();
      console.log("只是提交了文本");
      wx.navigateBack({
        delta: 1
      });
    }
  }
})

drf后端代码
views.py


class ImageView(CreateAPIView):
    model = Image
    serializer_class = ImageSerializer
    parser_classes = (parsers.MultiPartParser,)
    permission_classes = (permissions.AllowAny,)

urls.py

    path('image_upload', ImageView.as_view(), name='image'),

name 参数可选。
models.py

class Image(models.Model):
    image = models.ImageField(upload_to='images/uploads/%Y/%m/%d/', blank=True)

image是传递的key，前端把值绑定这个key，后端获得。
serializers.py

class ImageSerializer(serializers.ModelSerializer):
    class Meta:
        model = Image
        fields = ("image",)

框架

整个程序的框架，及其部件用法。

小程序配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性

全局配置

全局页面在这里配置

页面配置

单独页面的配置在这里

sitemap 配置
场景值

框架接口

生命周期函数

WXML 语法参考

数据绑定

视图层事件

全局变量

定义全局变量

在app.js中
在这里插入图片描述

引用全局变量

在这里插入图片描述

循环和条件渲染

 <view class="goods_info_content" wx:for="{{goodsObj.goods_introduce}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    <view wx:if="{{goodsObj.goods_introduce[index].type=='image_block'}}">
      <image mode="widthFix" src="{{webRootUrl+goodsObj.goods_introduce[index].value.image.mobile.src}}"></image>
    </view>
    <!-- 富文本 -->
    <view wx:if="{{goodsObj.goods_introduce[index].type=='paragraph_block'}}">
      <rich-text nodes="{{goodsObj.goods_introduce[index].value}}"></rich-text>
    </view>
  </view>