环境准备
项目初始化配置
-
在本地设置中，关闭域名的校验，因为微信小程序要想上线访问的端口只能为https协议的，但在开发可以设置。
-
删除无用代码和文件
- 删除 page->log页面
- 将page->Index的页面无用代码全部删除
// index.js Page({ data: { }, onLoad() { }, login(){ console.log('点击'); } })- 删除 utils->util.js
- 将app.js无用代码进行删除
App({ onLaunch() { } })- 将app.json中配置的log页面进行删除
-
封装请求
在utils下创建一个js文件，名字可以叫做request.js，然后复制以下已经封装好的代码// 同时发送异步请求的次数 let ajaxTimes = 0; export const request = (params) => { ajaxTimes ++; wx.showLoading({ title: '加载中', mask: true }) // 后台的请求地址，记得修改成你自己的地址 const baseUrl = 'http://localhost:8888'; return new Promise((resolve, reject) => { wx.request({ ...params, url: baseUrl + params.url, success: (result) => { resolve(result.data); }, fail: (err) => { reject(err); }, complete: () => { ajaxTimes --; if(ajaxTimes === 0) { // 所有请求都完成后再关闭提示 wx.hideLoading(); } }, }) }) }这时可能会报错 ：小程序 已被代码依赖分析忽略，无法被其他模块引用。你可根据控制台中的【代码依赖分析】告警信息修改代码，或 关闭【过滤无依赖文件】功能
只需要将这两个配置粘贴到
project.config.json=>setting里面"ignoreDevUnusedFiles": false, "ignoreUploadUnusedFiles": false,然后这样去导入和使用 例如
-
配置tabbar和全局的样式 在
app.json(没有创建页面无需配置)，例如在这里我又创建了一个my的页面
"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "imgs/home_no.png", "selectedIconPath": "imgs/home_yes.png" }, { "pagePath": "pages/login/login", "text": "我的", "iconPath": "imgs/me_no.png", "selectedIconPath": "imgs/me_yes.png" } ] }
下载使用Vant
官网链接https://vant-contrib.gitee.io/vant-weapp/0.x/#/quickstart
- 在微信小程序初始项目创建完成后，来到项目根路径所在目录，打开终端 使用命令
npm init -y构建一个webpack初始化项目 - 再输入
npm i vant-weapp -S --production进行下载 - 选择工具栏中的构建npm
到这里vant的下载就完成了，但使用每一个组件前，都要去app.json（全局有效）或要所在页面中的index.json（只在此页面有效）中进行引入
比如，要在全局中引入一个vant按钮组件，在官网中就会提示怎样引入
这么直接引入可能会报文件找不到的错误!!!
解决方法1：模拟在官方文档中 快速上手部分按钮的引入方式，将按钮替换为对应的组件
* 例如 我想引入一个输入框，查看官网知道输入框的单词为 field，所以参照按钮推断出输入的引入方式为
使用可以直接复制官网在对应的页面
解决方式二：自己去定义路径
还是引入输入框，可以使用
根据编译器提示一步步找到对应位置
复制后放入这个位置
然后在小程序页面中复制对应组件的标签以及样式即可
- 去掉app.json中的
"style": "v2",因为v2版本的样式可能会覆盖掉组件原本的样式
引入wxcharts
-
下载其js包，然后导入js包 地址 https://github.com/xiaolin3303/wx-charts/tree/master/dist
-
将下载的文件放入
utlis,可命名为wxcharts.js
引入高德地图
注意高德地图微信小程序的key与web页面的key不能混用，需要有一个单独用于小程序的key ，这个key还没有秘钥
-
去高德地图官网下载高德地图的js包，https://lbs.amap.com/api/wx/download，将其解压后得到一个
amap-wx.130.js可放入utils包中 -
同wxchart一样，在所需的页面中，将其js包引入
-
在
app.json中配置授权"permission": { "scope.userLocation": { "desc": "点击确认" } },
<view class="map_container"> <map class="map" name="" longitude="{ {longitude}}" latitude="{ {latitude}}" scale="16" show-location="true" markers="{ {markers}}"> </map> </view> <view class="map_text"> <text class="h1">{ { textData.name}}</text> <text>{ { textData.desc}}</text> </view>
到这里环境的搭建就基本完成了
使用
wxchart使用
1、在wxml中指定盒子 2、在js中创建对象绘制图表显示在盒子中
- 在wxml中指定图表显示的位置以及大小 ，要使用
<canvas>标签，标签的id成为图表显示位置标识，class用来在wxss中写入样式，一定要指定大小,否则不会显示<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas> - 在所要引入的页面的js代码中，引入wxchats的js包
- 在
data中定义图表所需的动态变量，在onShow()中接收请求从后端带回的数据，并给data中变量赋值。在onshow（）方法中开始创建wxCharts对象 ，设置图表数据，具体可以参考这篇文章 https://www.cnblogs.com/xiaobai-y/p/9089157.html 。
总结： 在wxml中指定画布<canvas>->在wxss中指定画布显示的位置，以及大小、样式美化等.->在dara中设置与图表所需的动态数据.->在onLoad()中发送请求获取后端数据，并对data变量进行赋值。->在onShow()中渲染图形，进行显示
高德地图的使用
与上面chart的使用流程相同，值的注意的是地图信息的显示是在wxml标签属性中，js只是获取数据，并对数据进行赋值，而不进行地图渲染
-
在wxml页面中指定地图要显示的信息如位置、长宽、地图中心、标记的点等。在js中创建地图对象，然后调用方法，在成功的回调方法中为wxml中的变量进行赋值，从而显示地图信息
-
定位功能 如果我想要获取当前用户位置并在地图中描绘成一个点
wxml 在页面中指定地图显示，留出数据的位置
<view class="map_box"> <map id="navi_map" longitude="{ {longitude}}" latitude="{ {latitude}}" scale="15" markers="{ {markers}}"></map> </view>wxss部分
js的data部分
js的onLoad
在这里根据不同的地理位置需求调用不同的地图对象api
var myAmap= new amapFile.AMapWX({ key:'353e57c983700f2d920ca2c709013cbe' }) myAmap.getRegeo({ success:(data)=>{ this.setData({ latitude:data[0].latitude, longitude:data[0].longitude }) var marker={ } marker.latitude=data[0].latitude, marker.longitude=data[0].longitude, marker.id=data[0].id, marker.width=23, marker.height=33 var markArr=[] markArr.push(marker) this.setData({ markers:markArr }) }, fail:()=>{ console.log('获取地理位置坐标失败'); } })上面函数的输出结果 ，
data中显示的数据，数据非常的多！
效果：
-
关键词搜索功能
在js中传递搜索的关键词querykeywords，调用 地图对象的getPoiAround方法，在回调中会显示附近的点信息
-
给点绑定点击事件
在map标签中 添加属性 bindmarkertap="绑定的函数名xxx" ，在js中此函数的参数中会传递该点的id序号，然后在保存点的数组中通过id序号即可找到点的信息、对象等。实现对点的修改
vant Weapp的使用
列举一下我再使用时遇到的问题
-
引入样式不能够按照组件给定的引入方式，可能会出现找不到组件置
-
主要按钮在官网是蓝色，但在微信中是绿色
-
按钮组件无法指定样式 ，无论使用行内样式还是类都是无效的
我的解决方式是 ，直接查看组件对的样式类，在类中进行改写改写
-
官网给的 Filed输入框需要通过
bind:change然后在绑定的函数中event.detail获取输入框的值，每一个数数据框都要有一个对应事件
也可以通过这种方式实现model:value="{ { xxx }}"，即在value变量前添加model
笔记
- 要想实现页面动态标题设置，可以在其页面的onShow（）方法中 调用wx的api设置
onShow() {
wx.setNavigationBarTitle({
title: "个人中心"
})
},
- tabBar页面的跳转 与 普通页面的跳转方式不同
tabBar的路由方式跳转
wx.switchTab({
url: '../xxx/xxx'
})
普通页面的路由跳转
wx.navigateTo({
url: '../xxx/xxxx',
})
- 小程序的提示可以使用
wx.showToast()
wx.showToast({
title: '请先登录',
icon: 'error'/'success'/'loading'/不写（即只定时显示文字）
})
还可以在对象中指定延迟 duration 默认延迟1500
-
小程序设置data中的变量方式
与react类似。需要使用wx.setData({data属性变量：xxx}) 方法
对于对象形式的赋值，需要使用[‘a.b’]包裹 -
怎样将开发的程序分享给别人体验？
- 首先 在创建项目时不能使用测试号开发，要使用自己注册的APPID，这样才会使用自己的账号登录进行后台管理。微信小程勋后台管理网址 https://mp.weixin.qq.com/，在登录时要选择自己appId的小程序
- 开到这里，如果小程序没有点击上传，这里不会有任何版本
-
上传自己的小程序到开发管理平台，形成一个版本
然后在管理平台就会看到
-
选择体验，然后添加体验人员的微信号码，将微信小程序体验版二维码发送给已经设定的体验人员，体验人员扫码就可使用，且码不过期
注意一定要设定体验人员，其他人员无法扫码