陈平说,知己知彼,胸怀天下。
所以开发第一步,查看官方文档。了解到微信小程序是轻量级的应用,无需下载便可应用,但是正是因此优势,对代码有了更多的要求。
划重点:
考虑到包大小对用户体验的影响,平台限制单个代码包的大小上限为 2M。
emmmm?2M,一张图片就5M了,那么为了项目成功发布,需要将所有的素材放在服务器上,以接口的形式获取。
第一步:注册微信小程序
进入微信公众平台,注册新的小程序,这里就不赘述了,按要求填写相应的信息(姓名、手机号码、邮箱号等)即可,完成注册。
划重点:注册是请根据需求选择主体类型,企业才拥有微信认证、微信支付及高级接口能力,请按照具体的需求选择。
第二步:完成小程序相关设置,下载开发工具
注册完成后,扫码登录后台。首次登录需要完成相关信息的填写(小程序名称、小程序图标等),后期可更改。
划重点:开发—>开发设置 检查是否出现小程序ID,该ID非常重要,是识别小程序是否合法的标识。
下载最新版本的微信开发工具。下载地址
备注:由于微信开发工具版本更新较快,如以前下载过该程序,建议卸载后重新安装。
第三步:熟悉小程序目录结构
打开微信开发者工具,新建项目,选择小程序文件夹,填写小程序ID,进入开发者工具。
主界面
目录结构
utils文件夹存放工具类文件:
project.config.json:存放小程序项目配置信息,与vue中package.json文件类似。
app.wxss:全局css,存放页面中相同、需重复使用的css;
app.json:全局json配置,更改标题、颜色等;
app.js:全局js文件。
pages文件夹存放展示类文件:
该文件夹每一个文件夹包含如下文件
①**.wxml ===>.html**
- view ===> div
- text:长按选中功能
- image ===>img
- button
- input
- label
- switch
- map
注意:标签一定要闭合
②**.wxss ===>.css**
微信小程序适配单位:rpx。
划重点:建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 375*667。可以根据屏幕宽度自适应。
布局:弹性盒布局
③**.js**(核心:数据驱动)
-
数据 :
js中定义: data:{ str:“value值” } wxml 中访问:{{str}}
-
列表渲染
wx:for=’{{数组名}}’
{{item}}可获取数组元素
{{index}}获取下标 -
条件渲染
wx:if=‘条件’ -
事件
bind:不会阻止冒泡
catch:会阻止冒泡
bindtap = 函数名() [函数在js文件中定义]