小程序搭建总结

适合有基础的同志查阅,初学者也可以看看我的零基础小程序文章,需要总结文档留言给我或者公众号里面都有

1.项目的技术选型

第三方框架
1.腾讯 wepy 类似vue
2.美团 taro 类似vue
3.京东 taro 类似 react
4.滴滴 chamelem
5.uni-app 类似 vue
6.原生框架 MINI

1.1.1.接口文档

2.帮助文档

1.小程序开发文档
2.mdn
3.阿里巴巴字体 iconfont

3.项目搭建

3.1.2.代码的初始化

删除日志页面,json,文件
修改标题
app.wxss清空 app.js清空,wx-app
index默认样式清空
index 代码清空,wx-Page
设置页面首页

3.2.搭建小程序项目

填入自己的appid

3.3.搭建目录结构

目录名 作用
styles 存放公共样式
components 存放组件
lib 存放第三方库
utils 自己的帮助库
request 自己的接口帮助库

3.4.搭建项目的页面

页面名称 名称
首页 index
分类页面 category
商品列表页面 goods_list
商品详情页面 goods_detail
购物车页面 cart
收藏页面 collect
订单页面 order
搜索页面 search
个人中心页面 user
意见反馈页面 feedback
登录页面 login
授权页面 auth
结算页面 pay

3.5.引入字体图标

1.打开阿里巴巴字体图标网站
2.选择的图标
3.添加至项目
4.下载到本地
5.将样式文件由css修改为wxss
6.小程序中引入,在app.wxml设置

@import "./styles/iconfont.wxss";//复制代码的文件路径

图标的引用

<view>首页
<text class="iconfont icon-shoucang"></text>//样式名,图标名
</view>

3.6.搭建项目tabbar结构

基础写过.
安装插件后tabbar按下tab快速创建

3.7.初始化样式

小程序不支持通配符 ‘*’
page{p0+m0+bsz}
可快速写出代码

3.8.样式适配

3.8.1.轮播图

由外到内view,swiper,swiper-item,navigator,image
swiper和image需要自适应,所以屏幕宽度都是750rpx
swiper高度需要计算,

先找出来原图的宽度和高度等比例 给swiper 定 宽度和高度 原图的宽度和高度
1125 * 352 px
swiper 宽度/ swiper 高度= 原图的宽度 / 原图的高度
swiper 高度 swiper宽度 * 原图的高度 / 原图的宽度
height: 100vw * 352 /1125
自动计算calc(100vw * 352 /1125)

1.swiper标签存在默认的宽度和高度
100%*150px
2.image标签也存在默认的宽度和高度
320px * 240px
3.设计图片和轮播图
1.先看一下原图的宽高 750 * 340
2.让图片的高度自适应 宽度 等于100%
4.图片标签
mode属性 渲染模式
widthFix 让图片的标签的内容的宽高都等比例的发生变化

3.8.2.导航

less

.index_cate {
display: flex;
navigator {
flex: 1;
padding: 20rpx;
image{
width: 100%;
}
}
}

wxml

    <view class="index_cate">
<navigator wx:for="{{catelist}}" wx:key="name">
<image mode="widthFix" src="{{item.image_src}}" />
</navigator>
</view>

3.8.3.楼层

less

.index_floor{
.floor_group{
.floor_title{
padding: 10rpx;
image{width: 100%;}
}
.floor_list{
//清除浮动
overflow: hidden;
navigator{
float: left;
width: 33.33%;
//后四个超链接
&:nth-last-child(-n+4){
//原图的宽高 232 / 385
// 232 / 386 = 33.33vw / height
//第一张图片的高度 height:33.33vw * 386 / 232
// 要带括号
height:(33.33vw * 386 / 232 / 2);
border-left: 10rpx solid #fff;
} // 2 3 两个超链接
&:nth-child(2),
&:nth-child(3){
border-bottom: 10rpx solid #fff;
}
image{
width: 100%;
height: 100%;
}
}
}
}
}

wxml

<view class="index_floor">
<view class="floor_group" wx:for="{{FloorList}}" wx:for-item="item1" wx:for-index="index" wx:key="floor_title">
<!-- 标题 -->
<view class="floor_title">
<image src="{{item1.floor_title.image_src}}" mode="widthFix"></image>
</view>
<!-- 内容 -->
<view class="floor_list">
<navigator wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="image_src">
<image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}" />
</navigator>
</view>
</view>
</view>

3.8.4.分类页面

List item

4.首页

4.1.效果

4.2.业务逻辑

1.使用tabbar 实现底部导航功能
2.使用自定义组件的方式实现头部接索框
3.加载轮播图数据
4.加载导航数据
5.加载楼层数据

4.3.接口

1.获取首页轮播图数据

https:/ /api.zbztb.cn/api/public/v1/home /swiperdata

异步请求,用返回值实现轮播图

2.获取首页分类菜单数据

https://api.zbztb.cn/api/public/v1/home/catitems

3.获取首页楼层数据

https:/ /api.zbztb.cn/api/public/v1/home/floordata

4.4.关键技术

小程序内置 request API
es6的| promise
小程序swiper组件
自定义组件实现搜索框

4.5.添加域名白名单

在小程序开发设置网页

5.分页页面

5.1效果

5.2.业务逻辑

1.加载分类页面数据
2.点击左侧菜单,右侧数据动态渲染

5.3.接口

1.分类页面数据

https : / /api.zbztb.cn/api/public/v1/categories

5.4.关键技术

scroll-view组件
es7的async和await

5.5.小程序中支持es7的async语法

es7的async号称是解决回调的最终方案
1.在小程序的开发工具中,勾选es6转es5语法
2.下载 facebook的regenerator库中的 regenerator/packages/regenerator-runtime/runtime.js
3.在小程序目录下新建文件夹lib/runtime /runtime.js ,将代码拷贝进去
4.在每一个需要使用async语法的页面js文件中,都引入(不能全局引入)

import regeneratorRuntime from '../../lib/runtime/runtime ';

微信小程序搭建总结的更多相关文章

  1. 微信小程序搭建mpvue+vant+flyio

    导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑 ...

  2. 微信小程序搭建mpvue+vant

    第一步:查看是否已经装了node.js $ node -v $ npm -v   正确姿势 没有装的话前往Node.js官网安装 第二步:安装cnpm $ npm install -g cnpm -- ...

  3. 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务

    昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...

  4. 微信小程序搭建和开发相关指引

    几点: 1.环境搭建 2.开发和调试 3.发布 原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetai ...

  5. mpvue 开发微信小程序搭建项目

    首先 mpvue 是一款基于vue的框架,mpvue 修改了 Vue.js 的 runtime 和 compile 实现,可以运行在小程序的环境中. 第一步:安装 vue-cli vue-cli是vu ...

  6. 免费的SSL证书,免费为微信小程序搭建https

    StartSSL 也免费提供了一个证书(纯英文) 申请地址:https://www.startssl.com/Account?r=L1ZhbGlkYXRl 阿里云免费提供的证书 https://com ...

  7. 微信小程序实例-摇一摇抽奖

    概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...

  8. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  9. 一个小时快速搭建微信小程序教程

    「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的 ...

  10. 微信小程序一步步搭建商城系列-01-开篇

    1.小程序介绍 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无处不 ...

随机推荐

  1. Windows10安装UR_RTDE

    ------------恢复内容开始------------ 要使用UR_RTDE必须先配置电脑环境,目前使用的环境是电脑win10,配置环境需要VS2019+boost1_66_0+cmake2.3 ...

  2. P2345 [USACO04OPEN] MooFest G

    简单的一个分块处理:优雅的暴力枚举 #include<bits/stdc++.h>using namespace std; typedef long long ll;const int N ...

  3. 使用.pem密钥文件登录服务器

    一.使用puttygen工具将.pem文件转成.ppk文件 Load时,需注意选择文件类型为All Files 二.使用secureCRT工具登录 点击properties...按钮,上传ppk文件, ...

  4. UMA插件专题(一)——基础网格创建

    什么是UMA? UMA,Unity Multipurpose Avatar,是一个开源Avatar创建框架,通过它可以实现自定义人物(或任何生物)的模型,包括换装,改变身材样貌等功能. 现在先从UMA ...

  5. 西电oj135题 拼数字并排序

    类别综合 时间限制 1S 内存限制 1000Kb 问题描述 对于输入的字符串(只包含字母和数字),将其中的连续数字拼接成整数,然后将这些整数按从大到小顺序输出.例如字符串"abc123d5e ...

  6. 关于不同平台、环境下64位int型的输入输出方式(转)

    C语言 64位int 定义方式: Linux: long long         Windows:__int64 C语言 64位int 输出方式: Linux: "%lld"   ...

  7. NDVI最大值合成

    这里有NDVI250m分辨率的数据,目标:合成年最大值数据 [Spatial Analyst工具]|[局部分析]|[像元统计数据]

  8. GUI编程--1

    GUI编程--1 GUI是什么 (Graphical User Interface),即用户图形界面编程. 怎么玩 平时怎么运用 组件 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 1.简介 ...

  9. 联邦学习FATE框架安装搭建

    联邦学习 FATE (Federated AI Technology Enabler) 是微众银行AI部门发起的开源项目,为联邦学习生态系统提供了可靠的安全计算框架.FATE项目使用多方安全计算 (M ...

  10. [Linux/JSON]JSON美化工具:json_pp / jq

    json_pp (git-bash内置的用于JSON格式化的管道工具:默认支持) (Linux CentOS7 暂不支持) curl http://localhost:8080/xxxx.json | ...