微信小程序开发实战记录

2021/10/28 20:39:49

本文主要是介绍微信小程序开发实战记录,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、环境准备

国内镜像

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();
},



这篇关于微信小程序开发实战记录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程