• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

开发环境搭建—微信小程序篇

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.小程序概述

2018年1月才给个人开发者开放权限。当初用“跳一跳”进入了大家的视野。

小程序到底有没有把我们写的js、html、css翻译为ios、android程序呢?

答:半翻译。视图层面的都是webview控件,直接呈递网页;功能层面比如震动、定位、陀螺仪xyz、摄像头都被翻译为原生ios和android了。

但是,张小龙留了一手,它让我们不能使用HTML标签,只能使用<view>、<text>这样的标签。这些标签会被翻译为<div>和<span>,不让我们直接用<view>和<text>。因为怕以后机理进行更改。今后可能会翻译HTML、CSS到ios、android。现在就让程序员适应。

小程序背后有没有webpack?

答:有webpack类似的东西,但是不是webpack。一些通用库,包括UI库都能够直接集成进去。但是不是npm install 了,而是github上下载zip包,解压缩到小程序哪里,配置一下,这样的思维。

小程序的生态?

答:太好了!weui、mintui、mpvue(用vue开发小程序)、canvas、插件非常丰富。

小程序的入口很丰富:

① “发现” → “最底下有一个小程序” → “搜索小程序”

② 微信首页下拉,找到圆圈们就是小程序。

③ 腾讯推出了“小程序码”,就是二维码,可以直接进入到指定小程序,甚至是小程序的指定页面、已经有指定数据在上面了。

④ 朋友圈点击连接,进入小程序的超链接。

开发之前要去mp.weixin.qq.com去申请账号,得到自己的ssid。这里不多说,太简单了。免费的,只需要有email即可。

小程序编程量不大,就用它的工具即可。

项目结构和page

填写AppID,每个人不同:

快速启动模板。         

app.js文件负责获得一些敏感权限,比如用户的姓名啥的。

这个文件用App({})包裹

app.json用来配置有哪些pages(页面)、顶部栏的颜色、底栏的图标啥的。

pages数组中加入一个项,自动创建文件夹和它的四文件了:js、json、wxml、wxss

 

配置参考:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。

app.wxss  微信使用wxss进行样式书写,和CSS完全一样,但是没有less、没有变量。

wxss中和CSS完全一样,多了一个单位rpx。任何屏幕都是750rpx。

相当于rem布局了。

CSS怎么写您就怎么写:浮动、flex、定位、3D变形都能用!!

project.config.json文件一点用没有,它里面都是用可视化界面“设置”能够改的。

 

任何一个页面都要放到一个文件夹中,一个page是四个文件:js、json、wxml、wxss。它们之间的关系天生存在,不需要link、script、import等等。

MVVM模式和wxml的指令

 

数据变了,视图自动变数据驱动。

和Vue相比:

data是对象,不是函数了。

事件处理函数,散着放,不要放在methods里面了

函数不能传参,必须使用data-

改data必须使用setData改。

绑定监听用bindtap、bindchange等。参数用data-n、data-m。不能加圆括号

用e.target.dataset.n来得到data-n

比如类名的动态:

循环:

能循环常数:

wxs是微信脚本的意思,里面用NODEJS风格的标准CMD进行暴露。

页面跳转带参数(面试常考),用类似GET请求的?形式。但是注意,这里不涉及服务器,所以不是真正的GET请求参数,是一个语法约定。

生命周期(面试常考):

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

都要补on前缀,它的首字母大写,比如onReady、onMoved

 

 

内置组件、内置API

选择照片(或者拍照)进行上传

内置组件是四维一体:UI界面(CSS样式)、事件监听、数据的传入传出、配置参数。

如果你要用别的UI组件库,比如WeUI或者iViewUI-weApp都是四维一体。

内置组件已经帮你屏蔽了ios和安卓的差异,都能够兼容运行。

首先你要写nodejs程序,写express + formidable处理上传请求。

注意!!注意!!注意!!小程序中有一个重要配置:

打勾:

比如让用户选择一张手持身份证的照片,或者身份证的正面、背面。

步骤:选图 → 上传

它自己帮你进行了代理跨域,代理跨域的服务器是qq的主线服务器,网速特别快。

加速器

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序,小程序二维码保存后识别不到小程序发布时间:2022-07-18
下一篇:
Excel _VBA入门之第一个小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap