客户不知道小程序如何注册的情况下，需要大概告知操作界面在哪。
进入公众号找的小程序管理，选择快速注册小程序即可进行注册。
根据提示进行账号注册。
添加完成之后即可开发小程序了。
pages用来存放所有小程序页面。
utils用来存放工具性质的模块。
api统一管理api接口。
其余的文件根据项目需要进行划分，如components文件就是存放公共组件模块。
app.json是小程序的全局配置，包括了小程序的所有页面路径，窗口外观，底部tab等。当中的style字段这是样式版本，加上style和删除style，这样会使用小程序组件样式是不一样。
project.config.json是项目配置文件，记录小程序开发工具所做的个性化配置，如项目名称，小程序账号ID等
页面中的json小程序每个页面中的json,配置本页面的窗口外观，会覆盖app.json的window中相同配置项。
1.加载解析页面的json文件配置。
2.加载页面wxml和wxss样式。
3.执行页面js文件，调用Page()创建页面实例。
4.页面渲染完成。
单向数据流就是从逻辑层到视图层，vue也是单向数据流Model-view，但是实现了双向数据绑定。而小程序没有做劫持代理，所以不能进行双向数据绑定。但现在小程序是有双向数据绑定这个概念的，叫简易的双向数据绑定。
需求：logo需要同右边的胶囊按钮顶部对齐。
解决方法：使用wx.getMenuButtonBoundingClientRect()
输出下wx.getMenuButtonBoundingClientRect(),可以看见胶囊按钮的信息，需要注意的是单位为px。
wx.getMenuButtonBoundingClientRect().top就能获取到胶囊按钮距离信息栏的距离,然后将px转为rpx。
解决办法：wx.createSelectorQuery()
注意两点：
1.要在ready函数中执行
2.在组件中使用wx.createSelectorQuery()之后，要用in()来指定范围。（将选择器的选取范围更改为自定义组件component内）或者在自定义组件或包含自定义组件的页面中，应使用this.createSelectorQuery()来代替
直接在this.setData中直接修改，编译器会显示波浪线报错。
data:{list:{deleted:false,name:"设计模块"}}//对象.属性名:修改的值this.setData({'list.deleted':true})修改数组data:{list:[{id:1,deleted:false},{id:2,deleted:false},{id:3,deleted:false}]}this.setData({'list[0].deleted':true})或者加入变量使用，用字符串拼接起来。
data:[{"id":0,"name":'zs'},{"id":1,"name":'ddds'}]letnewData="data["+0+"].name"this.setData({[newData]:"张三"})console.log(this.data.data)注:修改对象和数组都要用''包括起来
但下标总不能写死了，所以循环下就行了，主要就是赋值给新的变量，在新变量中进行修改数据，再进行this.setData。
第一步：进入eCharts官网点击下载选择下载，进入在线制定。按需要下载，减少体积
第二步：点击在线制定
第三步：选择需要的图形
第四步：下载
用ec-canvas文件就行
第七步：将ec-canvas文件放入项目中
我这里是在组件中创建了echarts文件夹,就把ec-canvas文件中的文件全部放进去。注意如果是按需制定的echarts，将echarts.js替换成在线制定生成的echarts.min.js。
同时修改ec-canvas.js中的import*asechartsfrom'./echarts'的引用文件。
第八步使用
配置组件使用
"usingComponents":{"ec-canvas":"../echarts/ec-canvas"}视图层
//引入eChartsimport*aseChartsfrom'../../components/echarts/echarts'data:{ec:{onInit:initChart},}functioninitChart(canvas,width,height){//绘制宽高letchart=echarts.init(canvas,null,{width:width,height:height});canvas.setChart(chart);//容器初始化echarts.registerMap('china',geoJson);//地图数据注册letoption={}chart.setOption(option);//返回初始化结果returnchart;}另外一种封装成组件
逻辑层
/***组件的初始数据*/data:{ec:{onInit:null},},//在组件实例进入页面节点树时执行attached:function(){this.setData({ec:{onInit:this.initChart}})},/***组件的方法列表*/methods:{//eCharts可视化地图initChart:function(e,width,height){//绘制宽高地图模糊时候使用devicePixelRatio调整清晰度constchart=eCharts.init(e,null,{width:width,height:height,devicePixelRatio:2.5});//容器初始化e.setChart(chart);//地图数据注册eCharts.registerMap('china',geoJson);//初始化数据letoption={}chart.setOption(option);//返回初始化结果returnchart;},大致效果:
wx.navigateTo打开页面最多只能打开10个，超过10个之后就没反应。
//导航列表跳转对应页面handleNavigate:function(e){//获取全局变量constapp=getApp()//获取全局变量中adCenterPitchOn的值letadCenterPitchOn=app.globalData.adCenterPitchOn//判断如果当前选中的id与全局变量中adCenterPitchOn不相等进行跳转，相等就不进入跳转程序，减少重复跳转。if(e.currentTarget.dataset.id!=adCenterPitchOn){this.setData({pitchOn:e.currentTarget.dataset.id})//navigateTo跳转不能打开10个页面，需要进行判断超过10个页面就关闭所有页面，重新进行页面栈个数统计letpages=getCurrentPages()//获取当前打开的页面letpagesLength=pages.length//获取当前打开页面的数量//打开页面数量大于等于10使用reLaunch关闭所有页面，重新进行页面栈个数统计。if(pagesLength>=10){wx.reLaunch({url:e.currentTarget.dataset.path,})}else{//小于10就使用navigateTowx.navigateTo({url:e.currentTarget.dataset.path,})}}}这里不直接使用reLaunch是因为会重新渲染，跳转一次屏幕就会有闪动。所以进行粗糙的处理到了10个页面,使用reLaunch，十次之后才会闪动一次。
第一步：开启tabBar自定义
在app.json中找的tabBar加入custom：true
同时官方文档建议还是将list内容写上，用来兼容低版本。
第二步：创建目录
创建custom-tab-bar与pages同级。
第三步：custom-tab-bar中wxml编写
创建一个工具类,用来处理custom-tab-bar切换
点击时触发，进行跳转
getTabBarIndex:function(e){//获取当前点击的下标及位置consttabBarData=e.currentTarget.datasetconstpresentPath=tabBarData.pagepath//跳转到对应页面，并关闭其他所有非tabBar页面wx.switchTab({url:presentPath,})}第五步：调用及高亮不变处理
在tab页引入consttabService=require("../../utils/tab-service");
ios和android显示的效果会有差异，这就需要通过识别机型进行适配。
在app.js中使用wx.getSystemInfoSync().platform获取手机型号
onLaunch(){//获取机型constres=wx.getSystemInfoSync().platform//将机型放进缓存if(res=='ios'){wx.setStorageSync('facility',"ios")}else{wx.setStorageSync('facility',"android")}},真机测试才行，模拟测试值是devtools
//导入服务器配置信息importconfigfrom'../config/config'exportdefault(url,data,method='GET')=>{//初始化Promise实例returnnewPromise((resolve,reject)=>{wx.request({url:config.host+url,data,method,success:(res)=>{//成功之后修改Promise状态resolve(res)},fail:(err)=>{//失败之后修改Promise状态reject(err)}})})}使用方法：
importreqfrom'../../utils/request'//引入封装的地址onLoad:asyncfunction(){//获取数据letpageImgData=awaitreq('/cas/query')},关于传值的方法全局变量使用在app.js中使用globalData定义全局变量。
//定义全局变量globalData:{userInfo:null,tabBarIndex:0,}app.globalData.变量名获取定义的变量值
//获取全局变量constapp=getApp()console.log(app.globalData.tabBarIndex)//直接修改变量，不需要setDataapp.globalData.tabBarInde=1父组件传值给子组件父组件使用子组件,传入父组件定义的值：tableHeaderData和tableList
/***组件的属性列表*/properties:{//列表表头数据tableHeader:{type:Array,value:[],},//列表数据tableList:{type:Array,value:[]},},父组件没有传值，子组件也不会报错。所以父组件可以按需传入相应得值。
//将值传给父组件this.triggerEvent("getLogHeight",62)父组件接收子组件传入的值
//设置缓存，传入数据wx.setStorageSync('facility',2)//获取缓存下的值wx.getStorageSync('facility')页面跳转传值wx.navigateTo({url:'xxxdata='+this.data.job,})接收参数:
解决方案：引入wxs模块实现
根据开发场景使用，这里就单独创建一个wxs,放入工具文件夹中。
wxs中写入方法
functionftoFixed(num){returnnum.toFixed(2);}module.exports.ftoFixed=ftoFixed;wxml中使用wxs
保留小数点稍微完善版：
接收后端传入的数据，将字符串显示成html格式内容。
可是使用rich-text
解决办法：使用wxPars
将下载好的文件放入小程序中，放的位置看你心情。
在需要的功能模块下引入js文件。
js中进行数据绑定
/*1.bindName绑定的数据名(必填)*2.type可以为html或者md(必填)*3.data为传入的具体数据(必填)*4.target为Page对象,一般为this(必填)*5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/WxParse.wxParse(bindName,type,data,target,imagePadding)letthat=thiswx.request({url:'',header:{'Content-Type':'application/json',},success:res=>{letarticle=res.data.objWxParse.wxParse('article','html',article,that,0);}})引入WxParse.css，可以在app.wxss引入，建议在需要模块的wxss样式文件中单独引用，不要全局使用，减少样式冲突。
在wxml文件中引入模板
使用模板，.nodes不要去掉。
如果head标签里有样式，这里会直接显示样式代码。
按照以往风格，简单粗暴的解决：在wxss文本中加入下面代码
.card_service_ul>.WxEmojiView.wxParse-inline{display:none;}.wxParse-head{display:none;}模拟器数据正常显示，真机测试获取不到数据这个问题有可能是后端同学限制了接口访问IP，造成真机测试时接口调用失败。
获取md5js源文件，源文件百度可以找到，因为审核不通过这里就不放了。
将md5源文件放入工具文件夹中
constmd5=require('../../utils/md5')可以直接使用md5加密，也可以拼接之后再加密，这里看后端是怎么要求的。
后端会给一些字段，直接存入数组中
data:{//里面存放后端需要的字段mdValue:[x,x,x,x,x,x,x,x,x,x,x,x,x]},进行拼接,将密码和数组中的字段拼接一起。注意这里的拼接方式后端规定，前端按照格式进行拼接即可。
letuserPwdStr=this.data.mdValue[4]+this.data.mdValue[5]+this.data.userPwd+this.data.mdValue[3]+this.data.mdValue[6]最后使用md5加密
md5(userPwdStr)base-64加密js放入工具文件夹中，源文件百度可以找到，因为审核不通过这里就不放了。
引入js
constbase64=require('../../utils/base64')直接使用
base64.base64_encode('xxxxx')如果后端有加密要求根据后端的规则进行加密。
底部图标大小不要超过30kb,如果超过小程序就会报错，15kb其实差不多就可以了。
当复用小程序整体代码，只是替换图片时，另起一个项目注意替换原来的appid。
在需要的页面中的json文件中简单配置下即可，app.json设置无效。
sharePhone字段自己定义就行。
代码中也需要进行配置：
在需要播放的页面中找到json文件，配置下视频插件。
"usingComponents":{"txv-video":"plugin://tencentVideo/video"}在wxml文件中加入代码：
关于视频需要申请一个企业账号，进行主体认证等操作。然后上传视频到腾讯视频，审核通过就行。
获取视频链接，右键视频点击视频信息
嵌入代码打开里面的vid就是o33401kc9b1跟上面的一样。
小程序有自带的人工客服，组件button加上open-type=“contact”属性，客服人员在小程序后台添加就行。
wx:for="{{book}}"默认是item
进行修改方法：wx:for-item="dataLiet"就可以使用dataLiet。
下标index也是wx:for自带的，可以进行修改wx:for-index="idx"就可使用idx
注意使用wx:for记得加上wx:key="index"可以换成后端传入的id。
1.使用外部链接进行引用（动态加载网络字体）
代码放在app.js中或者需要使用到的模块js中
font-family:"PingFang"!important;需要注意一点就是ios系统可以正常获取到字体，但是在安卓手机中会失败。这就需要进行配置，进入服务器找nginx配置,站点配置文件加入以下代码，开启cros支持，然后重启下nginx。
这里造成安卓手机失败的原因是字体链接访问需满足浏览器同源策略，字体文件资源设置CORS的Access-Control-Allow-Origin为小程序域名：servicewechat.com或者*
该行代码的含义为在HTTP响应中添加一个名为"Access-Control-Allow-Origin"的头部字段，这个头部字段的作用是指定允许访问资源的源，即哪些域名可以与服务器进行跨域请求；
如果是使用的宝塔的配置如下
location~.(eot|otf|ttf|woff|woff2|svg)${add_headerAccess-Control-Allow-Origin*;add_headerContent-Typefont/ttf|font/woff|font/woff2;}根据配置文件来设置。
解决安卓特殊字体失败问题还有一种方法就是字体文件转base64。
1.点击按钮Addfonts（添加字体）
2.将Base64encode按钮打开，下面的Formats按钮按需要选择。
3.转换好后点击Download下载
下载成功之后的压缩包。
解压后：
我大概看了一下大小比原来字体的还要大一些，所以个人觉得没必要安卓和IOS两套写法，直接在服务器配置文件就好了。
解决方法：删除掉app.json里面的
"lazyCodeLoading":"requiredComponents",
或者降低基础库的版本。
代码层级没有问题，却无法获取到手机信息
合法已经域名配置了，但小程序报错ERR_SSL_PROTOCOL_ERROR，直接找后端解决，代理啥的配置绝对有问题。