第一次运行到小程序：
1再HBuilder中设置微信小程序的路径，
2在微信小程序中打开安全-》设置-》端口
项目目录：unpackages:打包的文件
packages.json:页面配置
manifest.json：打包配置
生命周期函数：
应用生命周期：定义在app.vue中
onLaunch：当app初始化完成时触发（全局只触发一次）；
onShow: 当app显示时，触发；（浏览器从最小化切换到最大化，切换页签时）
onHide：当app隐藏时，触发；（浏览器从最大化切换到最小化，切换页签时）
onError：当app报错时，触发
页面生命周期：
onload：监听页面加载，参数为上个页面传递的参数
onShow:监听页面显示，
onReady：监听页面初次渲染完成
onHide：监听页面隐藏
onUnload:监听页面卸载
onPullDownRefresh ：监听用户的下拉动作，一般用于下拉刷新
uni.startPullDownRefresh()；可以通过按钮来开始下拉刷新，会触发onPullDownRefresh（）中的方法
uni.stopPullDownRefresh();停止下拉刷新
onReachBottom:页面滚动到底部的事件，（下拉加载数据）
网络请求：
uni.request({
url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
data: {
text: 'uni.request'
},
methods: "POST",//默认为GET
header: {
'custom-header': 'hello' //自定义请求头信息
},
success: (res) => {
console.log(res.data);
}
});
注意
对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。
数据缓存：
设置：uni.setStorageSync("userMsg",JSON.stringify(this.apiValue))；
获取：let res = uni.getStorageSync("userMsg"); console.log(JSON.parse(res));
移除：uni.removeStorageSync("userMsg");
文件上传：
uni.chooseImage({
count: 3, //上传的数量限制，默认为9 h5不生效
success: (chooseImageRes) => {
console.log(chooseImageRes)
this.imgList = chooseImageRes.tempFilePaths; //获取页面所展示的图片集合
uni.uploadFile({
url: 'http://39.98.225.237:9119/bcs/userInfo/updateUserInfo', //仅为示例，非真实的接口地址
//filePath: tempFilePaths[0],
//name: 'file',
formData: {
token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsZjA5MjMiLCJhdWRpZW5jZSI6IndlYiIsImNyZWF0ZWQiOjE2MDQzODIxMDYxNjgsImF1dGhUb2tlbiI6InR0c2Y6dG9rZW46cGM6MjU2OmRlZjY3MTg2LTkxNjUtNDk5OC1iOTU2LTJlZWFjZGU0ZjVmMiIsImNvbXBhbnkiOjI1NiwiZXhwIjoxNjA0NDY4NTA2LCJ1c2VySWQiOjM2MX0.R85s0MmEd6Qt9DdpkPwtlNvfvaNt5_79-g3XydT5I9uOUTLrCnSxnCTJnoNuetvIx7YBHEaCMJC9FOH5jQdQXw",
id: 361,
company_id: 256,
depart_id: 230,
create_user_id: 352,
user_name: "lf0923",
user_nike_name: "梁飞",
user_sex: 1,
user_phone: 13612345675,
user_email: "213465987465123@qq.com",
//这里会有一个默认的参数 file 就是chooseImageRes.tempFiles[0] 这个参数就是向后端传递的参数
multfile:chooseImageRes.tempFiles[0] //向后端传递的参数
},
success: (uploadFileRes) => {
console.log(“接口返回数据”, uploadFileRes.data);
}
});
}
})
图片预览：
uni.previewImage({
current:item,//当前显示的图片
urls: this.imgList,//图片列表 左右滑动的,
indicator:"number",//图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。 仅在安卓ios上生效
loop:true,//是否可循环预览，默认值为 false 仅在安卓ios上生效
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
条件编译：
<!-- #ifdef H5 -->
<view>
<text>只在H5展示</text>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>
<text>只在微信小程序中展示</text>
</view>
<!-- #endif -->
注：script中同样支持 只不过是 // #ifdef H5 //#endif
style中同样支持 只不过是 /* #ifdef H5*/ /*#endif */
路由跳转：
<!-- 声明式导航 -->
<navigator url="../detail/index?id=20&name=wangqi">跳转至详情页面</navigator>
<navigator url="../detail/index" open-type="redirect">open-type为redirect无返回按钮（将之前页面销毁了）</navigator>
<navigator url="../my/index" open-type="switchTab">跳转tabbar页面需要设置 open-type</navigator>
<!-- 编程式导航 -->
//不卸载之前页面
uni.navigateTo({
url:"../detail/index?name=xiaowang&age=100"
})
//跳转至tabbar页面
uni.switchTab({
url:"../my/index"
})
//卸载之前页面
uni.redirectTo({
url:"../detail/index"
})
接收路由参数：在onload(data){}这个生命周期中，有一个默认的参数，这个默认的参数就是路由传递的值，为一个对象
组件：引入方式同vue，生命周期同vue created，monted等等
传值：子传父，父传子，同vue，非父子 uni.$emit; uni.$on
插件：去插件市场下载
HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册componets。
api请求封装
建立一个公共的js文件
const BASE_URL = "http://39.98.225.237:9119";
//公共接口
export const myRequestApi = (parm) => {
return new Promise((resolve, reject) => {
let contentType = "";
if (parm.method == "POST") {
if (parm.contentType == 1) {
contentType = "application/x-www-form-urlencoded"
} else if (parm.contentType == 2) {
contentType = "application/json"
} else {
contentType = ""
}
}
uni.request({
url: BASE_URL + parm.url,
method: parm.method,
header: {
'content-type': contentType //自定义请求头信息
},
data: parm.data || {},
success: (res) => {
if(!res){
resolve()
}
if (res.data.code == 200) {
resolve(res.data)
} else {
return uni.showToast({
title: res.data.message,
icon:'none',
duration: 2000
})
}
},
fail: (err) => {
return uni.showToast({
title: res.data.message,
icon:'none',
duration: 2000
})
resolve(err)
}
})
})
}
//文件上传 平台上传图片返回结果是字符串
建立一个公共的js文件
export const myRequestFile = (parm) => {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: BASE_URL + parm.url,
formData: parm.data || {},
success: (res) => {
let temp = JSON.parse(res.data);
if(!res){
resolve()
}
if (temp.code == 200) {
resolve(temp)
} else {
return uni.showToast({
title: temp.message,
icon:'none',
duration: 2000
})
}
},
fail: (err) => {
let temp = JSON.parse(res.data);
return uni.showToast({
title: temp.message,
icon:'none',
duration: 2000
})
resolve(err)
}
})
})
}
然后再main.js中引入
import {
myRequestApi,
myRequestFile
} from "./static/js/api.js"
再
Vue.prototype.$myRequestApi = myRequestApi;
Vue.prototype.$myRequestFile = myRequestFile;
页面中在methods中使用
async getData() {
let res = await this.$myRequestApi({
url: "/bcs/userInfo/selectComAndDeptById",
method: "POST",
contentType: 1,
data: {
token: "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJsZjA5MjMiLCJhdWRpZW5jZSI6IndlYiIsImNyZWF0ZWQiOjE2MDQ0NjE0MTAzNjMsImF1dGhUb2tlbiI6InR0c2Y6dG9rZW46cGM6MjU2OjEwMWI3NTc0LTJmNDEtNGFjYS1hZjVjLWE1MzFkZjQ4MmRkMyIsImNvbXBhbnkiOjI1NiwiZXhwIjoxNjA0NTQ3ODEwLCJ1c2VySWQiOjM2MX0.CsbFgOcSb1bM2VrcN-7lG4qaMOR1IkvRarbGSYx6dVTGpzavAq1odNmjvZu6HlXBEbW2L14sntXqXe2M7awecw",
id: 360
}
})
if (res) {
this.apiValue = res.data;
uni.showToast({
title: "请求成功",
icon: 'success',
duration: 2000
})
}
},
打包：
微信小程序：
在manifest.json文件中：微信小程序配置--》appId（微信公众平台，开发，开发设置中）-》发布
在微信公众平台上 点击版本管理 -》提交审核
H5网页版本：设置完默认应用名称后；运行h5打包就行了
