微信小程序开发实战记录

2022-02-07 12:30:19

一、环境准备

国内镜像

1、淘宝NPM镜像
搜索地址：http://npm.taobao.org
registry地址：http://registry.npm.taobao.org

2、cnpmjs镜像
搜索地址：http://cnpmjs.org
registry地址：http://r.cnpmjs.org

配置淘宝镜像
npm config set registry http://registry.npmjs.org
npm config get registry

华为镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

安装vue/cli报错

npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to “coffeescript” (no hyphen) npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm ERR! code EEXIST

解决办法：
npm install npm@6.14.10 -g
npm install --global coffeescript
npm cache verify
npm cache clean
npm cache clean --force

环境配置
node -v
#v12.16.0

webpack -v
#4.20.2

vue -v
#没有显示版本，输入npm install -g @vue/cli

重装方案 (推荐)
上述方法无法解决，我卸载了nodejs，重新下载安装
https://npm.taobao.org/mirrors/node/v12.18.1/

#使用cnpm替代npm，加速下载
npm install cnpm -g
cnpm install -g @vue/cli

SSL证书安装

环境Centos, Nginx

上传key和pem文件至/etc/nginx/conf.d

#以下属性中，以ssl开头的属性表示与证书配置有关。
server {
    listen 443 ssl;
    #配置HTTPS的默认访问端口为443。
    #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
    #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
    server_name yourdomain.com; #需要将yourdomain.com替换成证书绑定的域名。
    root html;
    index index.html index.htm;
    ssl_certificate cert/cert-file-name.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
    ssl_certificate_key cert/cert-file-name.key; #需要将cert-file-name.key替换成已上传的证书密钥文件的名称。
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #表示使用的加密套件的类型。
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; #表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers on;
    location / {
        root html;  #站点目录。
        index index.html index.htm;
    }
}

重启服务
service nginx restart

mpvue可用性测试

cnpm install -g @vue/cli-init
vue init mpvue/mpvue-quickstart test

? Project name fgsrobot
? wxmp appid
? Project description A Mpvue project
? Author Nobita
? Vue build runtime
? Use Vuex? No
? Use ESLint to lint your code? Yes
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能

cd [目录]
npm install
npm run dev

微信小程序实战

Q: 微信小程序页面如何隐藏底部导航菜单
A: 转到的页面不要有Tabbar时，不要使用 redirectTo而是使用 navigateTo
或者
onl oad: function (options) {
wx.hideTabBar();
},

码农公寓