一、微信小程序项目初始化

183 阅读1分钟

项目完整代码:juejin.cn/spost/72455…

gitee:gitee.com/zhu12/banlu

一、不管是开发原生的小程序还是uniapp开发小程序

你在公司开发项目,前提:

	1. appid 	==》 公司给你

		wxc82730a0fc15e28a

	2. 开发者身份 ==》 公司给你添加

		明天晚上之前,把自己的微信号,

二、uniapp ui组件 ===>uView

如果采用npm安装方式在 小程序端不生效

4.1 采用插件的形式安装:https://ext.dcloud.net.cn/plugin?id=1593

image.png

    4.2 配置一下:https://www.uviewui.com/components/downloadSetting.html
    1. 引入uView主JS库:
    import uView from '@/uni_modules/uview-ui'
    Vue.use(uView)
    

image.png

    2. 在项目根目录的`uni.scss`中引入此文件:
    @import '@/uni_modules/uview-ui/theme.scss';
    

image.png

    3. 配置easycom组件模式:在项目根目录的`pages.json`中进行
   
     如果您是通过uni_modules形式引入uView,可以忽略此配置
        "easycom": {
                "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
        },

    

image.png

三、请求的二次封装、api解耦、处理跨域问题==》代理

3.1 新建utils/request.js :
    具体封装在这里:https://juejin.cn/editor/drafts/7245536612627693629
    
    官网:https://www.uviewui.com/js/http.html
3.2 main.js引入request.js

	// 引入请求封装,将app参数传递到配置中
	require('./utils/request.js')(app)

image.png

3.3 在utils/api/goods.js 弄api解耦:
        const http = uni.$u.http

        // post请求,获取菜单
        // export const postMenu = (data) => http.post('/ebapi/public_api/index', data)

        // 商品分页
        export const goodsPage = (data) => http.get('/mall/goods/page', {params:data});

        //商品详情
        export const getGoods = (data) => http.get(`/mall/goods/get/${data}`);
        
    在 pages/index/index.vue使用请求接口数据:
    	import { goodsPage,getGoods } from '@/utils/api/goods.js';
            
    
        

3.4 小程序怎么处理跨域问题==》不校验url

	***注意:上线不行

总结跨域问题

  1. 开发阶段:
             小程序: 没有跨域问题 需要 “不校验url”
             H5   : 浏览器需要设置代理来解决跨域问题==》类似于vue==〉proxy : server 在根目录新建vue.config.js
             
              module.exports = {
                devServer:{
                        proxy:{
                        '/':{ "target":'http://uat.banlu.xuexiluxian.cn',
                                        "changeOrigin":true
                                }
                           }
                    }
            }
            
            条件编译使用场景:处理跨域问题的时候,H5端:baseURL,小程序要走,
            所以给utils/request.js加入条件编译判断
          // 初始化请求配置
            uni.$u.http.setConfig((config) => {
                // #ifdef MP-WEIXIN
                config.baseURL = 'http://uat.banlu.xuexiluxian.cn'; /* 根域名 */
                // #endif
                return config
            })   
            
             
  2.上线阶段:
            必须在微信小程序后台管理开发者管理中 配置合法的服务器域名  “request合法域名” 就可以了,并且必须是https开头 如下图

image.png

四、自定义头部 : pages.json中pages

"style": {             
    "navigationStyle": "custom"  //代表自定义头部
}

五、在非有dom的生命周期中拿到dom怎么办?

“异步” ==》 promise、$nextTick原理就是返回了异步
    
    补充:在uniapp中:
        onload  ==> vue 的 create
        onReady ==> vue 的 mounted

小程序线上跨域: