微信小程序开发实战记录
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();
},
这篇关于微信小程序开发实战记录的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-13微信小程序如何封装接口域名?-icode9专业技术文章分享
- 2024-11-13如何在微信小程序中实现直传功能?-icode9专业技术文章分享
- 2024-11-13如何在小程序的地图组件中添加标记和文字?-icode9专业技术文章分享
- 2024-11-13在微信小程序的地图组件中如何实现自定义标记和气泡?-icode9专业技术文章分享
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享