文件目录结构
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中
文章来源：https://www.toymoban.com/news/detail-800809.html
引用全局变量
文章来源地址https://www.toymoban.com/news/detail-800809.html
循环和条件渲染
<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>
到了这里，关于微信小程序基本结构的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
