uni app 开发微信小程序及上线体验

项目创建及微信小程序AppId的申请
本次开发的是电商类的微信小程序，这里用到的是HBuilderX这个编辑器。之前用的Visual Studio Code 然后选择新建项目选择第二个uni-app。选择模板(建议选择默认模板）当然选择其他模板也可以，然后导入ui插件，可以导入多个插件，我这里导入了vant 和 uni 然后在微信社区登录小程序。安装注册流程注册申请小程序。然后系统给到AppId,然后再项目的manifest.json文件中找到微信小程序配置，然后填入相应的AppId，然后在HBuilder里面运行到微信小程序，如果电脑没用下载微信开发者工具，会提示下载或者直接去官网下载(tiannandibei diediezuimei)
配置http及封装Ajax
uni app配置相对比较简单。首先可以在项目里创建common文件夹。然后写一个http.js文件
然后在main.js文件中导入import “./common/http.js” 以下为http.js的配置内容

import Vue from "vue"// import {//  Encrypt,
//  Decrypt
// } from "./aes/index.js"Vue.prototype.$http = function(param, backpage, backtype) {let _self = this,url = param.url,method = param.method,header = {},data = param.data || {},token = "",cookie="",action = param.action || "",hideLoading = param.hideLoading || false;//拼接完整请求地址var requestUrl = "http://121.196.148.213:3000" + url;//固定参数:仅仅在小程序绑定页面通过code获取token的接口默认传递了参数token = login// if(!data.token){//其他业务接口传递过来的参数中无token//     token = uni.getStorageSync(this.sessionKey);//参数中无token时在本地缓存中获取//     console.log("当前token:" + token);//     if(!token){//本地无token需重新登录(退出时清缓存token)//         _self.login(backpage, backtype);//         return;//     }else{//         data.token = token;//     }// }// var timestamp = Date.parse(new Date());//时间戳// data["timestamp"] = timestamp;// // #ifdef MP-WEIXIN// data["device"] = "wxapp";// data["ver"] = "1.1.30";// // #endif// // #ifdef APP-PLUS || H5// data["device"] = "iosapp";// data["ver"] = "1.0.0";// // #endif//请求方式:GET或POST(POST需配置header: {'content-type' : "application/x-www-form-urlencoded"},)token = uni.getStorageSync('token');cookie= uni.getStorageSync('cookie')// cookie= "PHPSESSID=n3teundnfkhkoltcmkcrumfnh3"if (method) {method = method.toUpperCase(); //小写改为大写if (method == "POST") {header = {'TOKEN': token,'SESSIONS': cookie,'content-type': "application/x-www-form-urlencoded"};} else {header = {'TOKEN': token,'Set-Cookie': cookie,'content-type': "application/json"};}} else {method = "GET";header = {'TOKEN': token,'content-type': "application/json"};}//用户交互:加载圈if (!hideLoading) {uni.showLoading();}//    console.log("网络请求start", data);// console.log("加密前：", JSON.stringify(data))// let aes1 = Encrypt(JSON.stringify(data))// console.log("加密后：", aes1)// console.log("解密后：", Decrypt("A9DDDBBE7BC67298BB9922EF00BFA0C5D693AE804918376C6249CC3A083A22CA319A1BA5CFD1BEB93090325D52F92919"))//网络请求// try {//  // 获取放入缓存的字段token//     const token = uni.getStorageSync('token');//     if (token) { // 如果存在token 配置请求头//       header = {//           'Authorization': 'Bearer ' + token,//          'Content-Type': 'application/json'//        };//    } else { // 不存在token 跳转至登录//        uni.navigateTo({//          url: '/pages/login/login'//       });//       return;//   }// } catch (err) {//   console.log(err)// }// console.log(header,"header")return new Promise((resolve, reject) => {uni.request({url:  requestUrl,// url: `/apis/?s=${requestUrl}`,method: method,header: header,data: {action,// data: Encrypt(JSON.stringify(data)),data: JSON.stringify(data),},success: res => {uni.hideLoading()uni.setStorageSync("cookie", res.header["Set-Cookie"]);resolve(res.data)},fail: (e) => {uni.hideLoading()reject(e)// console.log("网络请求fail:" + JSON.stringify(e));// uni.showModal({//     content:"" + e.errMsg// });// typeof param.fail == "function" && param.fail(e.data);}});})
}

配置页面及tabBar
这个主要是在pages.json这个文件里面配置，因为微信小程序没有router跳转页面。所以我们再pages.json配置完页面需要用uni.navigateTo这个方法跳到对应页面。如果是跳到tabBa页面需要用到uni.switchTab这个方法，可以直接点击page这个文件夹选择创建页面会直接导入到pages.json文件中。很方便，以下是配置tabBar的代码

"tabBar": {"color": "#515151","selectedColor": "#f50","backgroundColor": "#fff","borderStyle": "black","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "static/images/home.png","selectedIconPath": "static/images/home-on.png"},{"pagePath": "pages/list/list","text": "分类","iconPath": "static/images/find.png","selectedIconPath": "static/images/find-on.png"},{"pagePath": "pages/cart/cart","text": "购物车","iconPath": "static/images/cart.png","selectedIconPath": "static/images/cart-on.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "static/images/mine.png","selectedIconPath": "static/images/mine-on.png"}]}

项目开发和组件通信
因为uni app是基于vue的所有更多是用到vue的组件通讯，然后整个结合onLoad 和created 可以更灵活的做好页面的加载，这个就不多讲了
项目打包及上传审核发布注意
完成项目开发好了之后，我们再HBuilder选择发行到微信小程序。然后再微信开发者工具选择上传就可以再小程序管理页面看到我们的项目了。然后我们选择设置为体验版。这样项目的体验用户就可以看到了。这边体验用户就是正常使用。但是提交审核还有一定的注意要求。首先电商项目不能一开始就要求客户必须授权，要让用户先体验整个页面，然后再选择是否登录授权。然后有不授权的回退页面。同时要完善小程序的资料填写，审核时间还是很快的大概半个小时就有结果了

uni app 开发微信小程序及上线体验相关推荐

记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
taro 重新加载小程序_Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
uni.app开发物联网小程序
1.当切换页面的时候,容易与mqtt服务器断开连接,并报错原因:在onLoad事件中,获取参数的时候使用异步获取,但是在事件里面还使用了这个参数,导致mqtt发布的时候,发了一个空主题,导致连接被断 ...
开发APP、微信小程序、网页,都需要什么？
开发APP,微信小程序,网页都需要什么? 准备工作前端开发后端开发技术整合打包上线结语在开始介绍之前,我先罗列一下APP,微信小程序,网页的大比较准备工作云服务器,域名(需备案),SS ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
uniapp一套代码开发app和微信小程序
为什么选择uniapp开发? 为什么选择uniapp进行开发? 1.uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的 ...
uniapp开发微信小程序，从构建到上线
前言: 本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考:使用 H ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...
uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...

uni app 开发微信小程序及上线体验

uni app 开发微信小程序及上线体验

uni app 开发微信小程序及上线体验相关推荐

最新文章

热门文章