1.学习资料相关
1.文档
| 名称 | 描述 |
|---|---|
| 小程序开发指南 | 通过9章全面介绍小程序环境搭建到使用发布 |
| 微信开放文档小程序 | 学习新东西最好的方式就是官方文档，建议快速浏览一遍，然后开发中要用到的再查。 |
| 微信组件示例 | 快速查看组件样式显示 |
| flex伸缩布局 | flex布局全面介绍 |
| Promise | 高级进阶：深度揭秘 Promise 注册微任务和执行过程 |
| 自定义组件 | 【官】自定义组件指南,【官】自定义组件官方文档 |
2.学习视频推荐
bilibili微信小程序/零基础/教程
【WEB前端】零基础玩转微信小程序
3.工具环境
| 名称 | 描述 |
|---|---|
| 下载地址 |
开发工具》稳定版 Stable Build：我下载的wechat_devtools_1.03.2010240_x64.exe
|
| 云开发 | 微信开放文档》云开发，云开发开发微信小程序、小游戏，无需搭建服务器 |
| 四大模块 | 1.JSON-配置,2.WXML-模板,3.WXSS-样式4.JS-逻辑交互 |
| 运行环境 | 1.渲染层：其中 WXML 模板和 WXSS 样式工作在渲染层，2.逻辑层：JS 脚本工作在逻辑层。 |
| 与HTML区别 | 1.签必须是严格闭合的，否则会导致编译错误。2.区分大小写 |
| 列表渲染 | 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item |
| 引用 | 1.import引入模板template,且不具又传递性2.include可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入 |
| WXSS引用 | 官方样式库 weui |
| 小程序中的JavaScript | 同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包 |
4.其他知识必备
HTML+CSS学习:https://www.w3school.com.cn/
ES5和ES6学习
Promise学习
2.小程序的一些限制：
| 名称 | 描述 |
|---|---|
| 页面堆栈个数 | 整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 注册程序 App 。 |
| 线程管理 | 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本 |
| 推送消息 | 无法实现消息推送功能，说是为了不打扰用户 |
| 代码大小 | 小程序超过1M，不允许上传 |
| 存储空间 | 同一个微信用户，同一个小程序 storage 上限为 10MB，单个key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB
|
| 插件个数 | 最多使用5个插件 |
| 颜色配置 | 很多地方的颜色都只能黑或白，比如window的navigationBarTextStyle，比如tabBar的borderStyle
|
3.开发路程遇到的问题
1.平台账号相关
平台区分？
微信公众平台mp.weixin.qq.com：服务号，订阅号，小程序，企业微信（原企业号）
小程序后台地址：https://mp.weixin.qq.com/wxamp/home/guide?token=391031398&lang=zh_CN
微信开放平台open.weixin.qq.com：移动应用开发，网站应用开发，公众帐号开发，第三方平台开发
注册小程序
作为登录帐号，请填写未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱
进入小程序后台?
我开了微信小店，所以登录就直接进入了微信小店，而微信小店的小程序是没有后台管理那一套的
于是我从新用另一个邮箱注册了一个新的微信小程序账号，然后登录小程序后台:https://mp.weixin.qq.com/wxamp/home/guide?token=391031398&lang=zh_CN
2.网络相关
没有设置request域名?
解：小程序后台-开发-开发管理-开发设置-服务器域名，里面填写自己的服务器域名（每月可修改50次），这样开发的小程序才能访问你的服务器域名来获取数据
3.tabBar相关
如何设置里面的图片大小,文字大小，顶部线条 "borderStyle": "black", 颜色?
解：无法设置图片文字大小，borderStyle只有自己去自定义 tabBar
4.text相关
如何文字水平垂直居中显示
text{
width: 200rpx;
height: 80rpx;
color: #3B77FF;
background-color: #3b76ff21;
border-radius: 40rpx;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 26rpx;
}
5.token如何添加
常规的添加token总是不成功
https://blog.csdn.net/dlmmu/article/details/102947577
搞了半天，原来是自己的bug,封装了两个网络请求一直走的另一个请求
6.定时器setInterval
https://blog.csdn.net/yechaoa/article/details/81985664
7.顶部TabBar
小程序实现顶部tab切换
微信小程序选项卡切换+导航栏顶部悬浮
8.动画
9.布局
- 使内部控件居中：
display:flex;
justify-content:center;
- 使内部控件居右侧：
display:flex;
flex-direction:row-reverse;
width:100%;
text-align:right;
-
微信小程序设置padding-right和margin-right无效使用
box-sizing
width:100%;
box-sizing:border-box;
padding:33rpx;
- Tab悬浮在顶部：
position:fixed;
top:0;
位置定位position详解
九宫格布局
微信小程序学习之flex布局实例篇
微信小程序--布局基础&样式基础
10.图片
微信小程序设置背景图片
image占位图通过三目运算符，异常加载图通过
//WXML
<image class="iv_avatar" src="{{user.avatar}}" binderror="loadImgErr"/>
//js
loadImgErr(e){
let errorurl = '/images/icon_selected_tab3.png'
this.setData({
user:{avatar:errorurl}
})
11.点击事件
循环控件点击事件
//wxml
<view class="tui-col-3" wx:for="{{tabs}}" wx:key="this" data-key="{{index}}" bindtap="onTabClick">
<image src="{{item.icon}}" style="width:60rpx;height:60rpx"/>
<view>{{item.name}}</view>
</view>
//js
onTabClick(e){
var that =this;
var obj = that.data.tabs[e.currentTarget.dataset.key];
wx.showToast({
title: obj.name,
})
}
12.数据
- 小程序调用本地json文件数据
- 点击事件数据传递后面全小写，用
-连接data-province-id="1681"不能data-provinceId="1681"，接收的时候provinceId才有值
13.弹出框
14.事件传值
15.通知广播
16.分享到个人和朋友圈
【官】监听用户点击页面内转发按钮-分享小程序页面到个人和朋友圈
2018.3简书：微信小程序之分享功能
定义全局分享
微信小程序实现分享至朋友圈的功能来啦-暂仅在Android平台支持
17.关键字解释
微信小程序中Var、Let、Const用法详解
var:全局变量
let:局部变量
const:常量
18.引入
引入其他样式到本wxss中
@import "../../component/css/item_job.wxss"
引入其他工具到本js中
const http = require('../../utils/httpUtils')
19.自定义组件
- 【官】自定义组件官方文档
- 小程序自定义组件之popupwindow
-
微信小程序弹窗组件
大意导致Cannot read property 'showPopup' of null，原来是搞忘记了其中的第三步，json配置导入自定义组件
{
"usingComponents": {"popup": "/component/popup/popup"}
}
- 坑1：在模拟器中可以，真机调式出现路径错误
Component is not found in path '...',仔细检查路径是正确的，
原来要在自定义组件的json中配置"component": true参考：微信小程序——自定义组件时，编译报错的评论
20.渲染层网络层错误
图片地址错误，导致图片下面的控件关联数据显示不出来！原因：数据模型都是来之user，里面包含了头像和名称，因为头像地址错误，导致名称也加载不来出来了，最好的处理的方法就是user中的头像参数分离出来，而不要用{{user.avatar}}的方式赋值，直接{{avatar}},这样avatar有错，不至于影响user里面其他正常参数的显示
data: {
isLogin:false,
user:{},
avatar:'/images/icon_unselected_tab3.png',
}
21.下拉刷新白色，看不见
原因：在json中涉资了背景白色，去掉即可，在wxml中控制背景色
"backgroundColor": "#fff",
22.组件穿透
- 组件穿透
方法一：把view换成cover-view、image换成cover-image【模拟器无效，真机有效】
方法二：把view换成cover-view、image换成cover-image且动态样式里加上z-index:999;【模拟器真机都有效】 - 滚动穿透
方法一：在弹窗标签上添加属性：catchtouchmove="true"【无效】说没有true方法
方法二：在弹窗标签上添加属性：catchtouchmove="move"，并在页面中定义一个空的move方法move:function(){},【模拟器无效，真机有效】
持续更新中...
网友评论