一、申请小程序

1、微信公众平台选择个人开发

2、下载对对应开发工具并填写个人及小程序相关信息;

3、打开开发者工具，选一个demo并先使用测试ID;

二、小程序原生新建项目查看结构图：小程序代码构成档指南

1、基础四结构

xx.js: 行为js代码
xx.wxml：类似html，存放页面结构
xx.wxss: 类似css
xx.json：页面有关的配置，例如背景色

2、 Pages 存放各个页面的模块

3、 app.json 放全局的UI及页面，pages存放页面

新建页面时pages里会自动增加，但删除时不会自动删除；
app.wxss 全局可引用到的样式

4、 Utils：工具类存放处（非必须）

5、 project.config.json：项目配置，名字，id等

6、sitemap.json 配置小程序及其页面是否能被微信索引；

7、有些原生成品项目可以看到这个，这个玩意是第三方组件会生成，例如：vant app生成，见咸虾米5.9视频。

补充、工具左下角可以看到当前界面

一、实践

基本界面
指定css中的属性例如class="usermotto"

二、组件视图容器 | 微信开放文档 (qq.com)

1、 View--div 等等

2、指定px是固定大小，例如width：200px，rps响应式布局

设置rpx就会自动自适应转行；

3、scroll-view[细节可以看咸虾米的2.4视频]

内嵌快捷键 .row{$}*8
可横可纵：

横版对子row（块元素）标签设置横版行级块元素：display：inline-block，（纯inline会忽视宽高） * 父布局设置white-space：nowrap；

三、框架

说明一些已有框架及其属性，

二、使用Taro框架

一、Taro介绍

1、Taro是京东的一款小程序开发框架：多端统一开发解决方案

原生的话可以直接看到样式，Taro的话需要执行npm run dev:weapp，将React语法转为微信可识别的文件；

1、匹配的Taro UI：O2Team (jd.com)

2、Taro hook:Taro 文档 (jd.com)

3、使用 Vant Weapp 移动组件库：Taro 文档 (jd.com)

4、Taro ApiTaro.showNavigationBarLoading(option) | Taro 文档 (nervjs.github.io)

showToast啥的一堆交互；

2、开发参考流程：

补充知识

一、语法

JS语法

concat
连接两个或多个数组并返回一个新数组

二、兼容

设备特性

1、微信内置浏览器对安卓和IOS返回机制不一样；

ios返回的页面会保留状态，安卓的不行；
返回上一页刷新或当前页刷新-腾讯云开发者社区-腾讯云 (tencent.com)
微信h5页面返回时ios不刷新页面解决方案_微信h5支付跳转不刷新

三、调试

vConsole

移动端vConsole使用方法(附带vue使用方法)

【微信小程序笔记】简单知识与Taro框架