vue转成微信小程序的问题

1.为什么要学习微信小程序开发

在三四城市，如果你说给别人做网站、erp、oa别人一定会说这不靠谱。确实也是，像erp之类是大公司用的，而三四线城市稍大的公司用个用友、金碟什么的就可以了，定制开发风险也高。让小公司拿出钱定制开发，更不太可能。所以小程序，成了一般小商家可以接收的方案。

技术方案，如果只是文字图片的展示，那么其实微信公众号也可以。但如果涉及拍照等底层功能，使用浏览器就有点力不从心了。

所以这个问题的答案，并不是单技术决定的，而是市场+技术决定的。

2.环境准备

在官方下载工具https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

现在有windows与mac版的。

3.基本语法转换

基本标签没有了div,span之类的,使用view代替div这种块级元素，使用text代替行内元素。

没有html里的onclick也没有vue里的@click,而是用bindtap这类代替事件绑定。函数只需要函数名，不带参数。如果需要参数，要用data-参数名="{{obj}}"这样来传参，获取参数要用传的默认参数evt(名可变).currentTarget.dataset.

vue里的v:for与v:if在微信里用wx:for与wx:if替换。

html与vue里的img标签改成image,注意mode="widthFix"这样的属性用法。

4.新建页面/组件操作

新建一个文件夹，再在这里面新建一个组件。输入名称，生成4个文件(js,json,wxml(html),wxss(css)),

5.全局配置/页面配置

工具栏可以在app.js里配置,不需要开发。

6.轮播图等常用组件

官方文档地址是https://developers.weixin.qq.com/miniprogram/dev/component/，这里组件很多，但做一个普通页面不需要这么多。知道常用的button,swiper,image等就可以了。

7.后端通信要求

小程序要求后端必须提供https接口，这要求我们的域名和环境要支持https。

a.首先要在云平台生成，我是在阿里云生成的。云平台也有收费和免费的，我选用的是免费的。生成审核后可下载密钥文件。

b.把文件配置到你的环境，我的是nginx,然后reload配置就可以了。

云平台在云上生成，

如果是本地的话，命令:

openssl req -x509 -nodes -days 36500 -newkey rsa:2048 -keyout /usr/local/nginx/ssl/nginx.key -out /usr/local/nginx/ssl/nginx.crt

nginx conf配置:

upstream tomcats{
#ip_hash;
        server 127.0.0.1:8080;
}
server {
    listen              443 ssl;
    server_name         xx.net www.xx.net;
    ssl_certificate     /usr/local/nginx/ssl/nginx.crt;
    ssl_certificate_key /usr/local/nginx/ssl/nginx.key;
    location / {
        proxy_pass   http://tomcats;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
server {
        listen       80;
        server_name  xx.net www.xx.net;       
        index index.html;
        location / {
        #上面配置的服务器组
            proxy_pass  http://tomcats;
            proxy_set_header           Host $host;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_connect_timeout       90;
            proxy_send_timeout  90;
            proxy_read_timeout  90;
            client_max_body_size        10m;
            client_body_buffer_size     1m;
            proxy_buffer_size   64k;
            proxy_buffers 32 32k;
            proxy_busy_buffers_size     128k;
            proxy_temp_file_write_size  1m;

            #limit_conn perip 10;
            #limit_conn perserver 20;
            #limit_rate 100k;


            index  index.html index.htm index.jsp;
        }

}

重启nginx

./nginx -s reload

文/程忠浏览次数：0次 2022-11-20 22:48:29

vue转成微信小程序的问题

相关阅读