微信小程序开发的完整人性化版攻略
前言:
适者生存,雨露均沾,本次要讲述的是我从零开发完整微信小程序的经验分享,微信小程序的作品:请搜索小程序:半个大夫
。也可以关注微信服务号:半个医生
。小程序已经绑定到该服务号。
注:小程序语言是:js
,和一定的css
基础,和些许的生命周期的概念,个人觉得有移动端开发经验加前端开发经验可以非常顺利开发,言归正传,Let's go(注意腾讯虽然已经有现成的教程了,我这里是快速的概括,开发注意事项)
正文:
创建流程
1.获取微信小程序的AppID
登录 https://mp.weixin.qq.com ,就可以在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID
了
2.下载开发工具
自行下载 微信开发者工具
3.工程结构概括
最关键也是必不可少的,是 app.js、app.json、app.wxss
这三个。其中,.js
后缀的是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件。其他文件件我也简单的介绍一下,这里讲的是一个工程结构设计的一种推荐方案,
common
文件夹是放一些公共的wxss
,用于复用和统一管理。
components
文件夹是放template
模板,组件化。
config
文件夹是放工程的一些配置,如服务端的地址,和图片服务器的地址
pages
文件夹是放小程序的模块界面了
resources
文件夹本该放小程序需要的一些资源,如图片之类的,但是因为微信小程序很多图片场景都不能直接使用本地的图片,所以所有的图片,都存放在服务端,一方面可以减少打包的小程序的包大小,一方面也可以方便管理。
service
文件夹是放跟服务端的https
接口交互的方法,可以理解为接口api
utils
文件夹是放一些工具类js
,和封装的http
类等
views
文件夹里面是空的,没有删掉,哈哈哈?
开发套路
小程序的js
的导入是require
所需的其他js
文件。
wxss
的导入是@import
所需的其他wxss
文件。
wxml
的导入是import
所需的其他wxml
文件。
有些需要全局共用的就放入app.js
中和app.wxss
中。
小程序有多少个界面和tabBar
配置,配置在app.json
里面。
这里对于以前开发移动端的人来说,要关心的wxss
的书写,以及wxml
的布局,和一些js
的编写(至于那些生命周期,看一眼就会了,就是在不同的情况下,会触发各不同的生命周期对应的方法,然后将自己需要处理的逻辑写入到对应的生命周期方法中)。
对以前开发前端的人来说,布局,样式什么的应该是毫无压力。多花点时间去了解,生命周期的使用。
小程序是数据渲染界面的模式(数据绑定),所以只要控制到js
中的data
里面的数据对象,就可以动态渲染界面了
初步学习阶段
在知道小程序是有多个界面拼在一起组成的之后,那我们可以开始学习的第一步了,熟悉小程序可以用的组件,或者叫标签。这里就不重复多余介绍,直接有兴趣看组件传送门,这些都是小程序提供的基础组件,我们的wxml
布局可以使用这些基础组件来构建我们的界面结构。了解的点就是那些组件的属性,和事件。事件就是我们可以在这些组件上做什么动作,做这些动作,我们可以触发什么方法。(这里跟我们开始学app
开发很像,从组件开始)
学习进阶阶段
我们可以到这里有几个生命周期的方法,我不准备过多的介绍每个方法对应的是什么时候,之间第一个onLoad
方法,里面有个参数options
参数,这个参数是用来接收他上个界面传递过来的参数的,上个界面传递的方法如
wx.navigateTo({url:"/pages/symptom/symptomsChoose/symptomsChoose?symptomWord="+symptomName});
这样就可以在下个界面的options
里面拿到symptomWord
这个参数,也是类似app
的方式。
在这个js
里面我们需要做的事情,就是设置好data
来渲染wxml
,配置好事件方法,来配合组件的事件来使用。
然后我们要开始写wxml
布局的时候,不可避免的就是if else,for
循环等逻辑渲染的操作,这些小程序都有对应的写法如wx:if, wx:for
也是非常的简单的
推荐方案一
如果遇到需要切换图片环境的时候,修改引用的图片,写在wxss
中是不合适的,推荐写在style
里面种如:
<view style="background: url({{serviceImageUrl}}bg_weather_onloading.png) no-repeat;background-size: 100% 100%;"></view>
js
动态修改serviceImageUrl
这个data
的数据对象即可。
推荐方案二
为了更好的适配各种机型,在wxss
尽量都使用rpx
来编写单位,小程序会帮我们处理好了各种适配
服务端
小程序只认可https
请求,所以需要服务端需要配置ssl
证书,来提供https
的支持,可以去百度腾讯ssl
证书,找一找就可以了
总结:
其实个人觉得小程序的开发门槛偏低,重点就是样式会写,然后基本的规则按照小程序规定的配置,然后在wxml
画出界面的结构,然后,在js
中配置上他渲染的数据data
和事件的触发方法的实现,然后知道界面的如果跳转,如何传参数。基本上就算是可以开发一个微信小程序了。会开发也算多会一门小技术吧,也是好事,祝各位学习快乐。这文章也是自己的一个小总结,后续会不间断的发表关于Android,微信,iOS,Java
相关技术的文章,有兴趣的朋友们敬请关注!感谢大家阅读。
微信小程序开发的完整人性化版攻略相关推荐
- 微信服务号开发的完整人性化版攻略
前言: 本次要讲述的是一个本人完整微信服务号开发的经验分享,微信服务号的作品:请搜索微信号:zjaisino,名称:爱信诺Aisino一站式服务平台.(这里声明,这不是打广告,只是为了方便各位开花攻城 ...
- 微信小程序开发的完整流程介绍,新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
- 微信小程序开发 获取手机 体验版获取不到code,需打开调试器才行?
最近开发遇到问题: 小程序开发,获取手机号时候,调用接口需要 code,但是体验版始终获取不到,只有在打开小程序调试器的时候才能获取到code.这么奇葩的问题原因竟然是小程序后台没有配置服务器域名,把 ...
- 软件工程毕业设计课题(61)微信小程序毕业设计JAVA旅游景区点评攻略小程序系统设计与实现
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信景区景点旅游攻略小程序系统,前台用户使用小程序,小程序使用微信开发者工具开发:后台管理使用基PP+MySql的B/S架构,开发工具使用p ...
- 微信小程序打开红包的css_山海经攻略(微信小程序现金红包提现游戏)
扫码进入小程序按照系统提示操作就可以获得0.3元红包,可以直接提现到微信账户. 一.山海经异变收入来源有三种 1.每升一级大概有一元的红包,满50元提现 2.获得分红神兽,分红神兽有四种,分别是神兽鸿 ...
- 华为云物联网平台的微信小程序开发
第0章 简介 上上期出了一个华为云物联网平台的Android APP应用开发教程, 根据后台的私信,包括华为云物联网IOT论坛里和公众号里,发现大家对物联网平台的移动端的开发需求还是很大的,接下来,带 ...
- 微信小程序开发分析总结
本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法.毕 ...
- 微信小程序开发环境(阿里云服务搭建+可运行的demo)
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无 ...
- 一键搭建微信小程序开发环境 及demo运行(腾讯云上一键搭建node.js服务器环境,PHP,Java,.NET服务类似)
一.首先准备下本地环境(本地就需要一个微信开发工具) 1.首先得有一个微信小程序账号,登陆微信小程序首页:mp.weixin.qq.com,点击右上角立即注册. 注册登陆后,首页填写一些小程序基本信息 ...
- WordPress版微信小程序开发系列(二):安装使用问答
自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordpress站想在微信的生态圈得到推广,小程序成为一种重要的 ...
最新文章
- Hibernate中get方法和load方法的区别
- linux下Vim和Terminal配色
- gRPC-rs:从 C 到 Rust
- FFMPEG结构体分析之AVFormatContext
- vue 在js 文件中使用store_vue 如何在 .js 文件引入 store
- linux下安装anconda
- 你可能不知道的 Android Studio 小技巧之「多行编辑」
- diffpatch升级_Tinker资源补丁原理解析
- 河北画报杂志河北画报杂志社河北画报编辑部2022年第20期目录
- 没有配置任何软件的计算机上能够运行,禁止电脑安装任何软件
- Linux下挂载大容量存储
- 2021年了,微信公众号还有前途吗?
- 设计一个抽象类图形类,在该类中包含有至少两个抽象方法求周长和求面积,分别定义圆形类、长方形类、正方形类来继承图形类,并实现上述两个方法。并创建实例验证。
- 最新 2022中国大学排名发布~
- PuTTY 下载安装教程
- c语言stm8变量存储类型,STM8使用----STVD(COSMIC)定义变量指定其类型和位定义
- ABCD选项的排序方式
- android 相册分组,Android获取相册路径
- 从“机械复制”到“机械原创”:人工智能引发文化生产革命
- 深圳大数据培训:Transformation算子演示
热门文章
- chroot环境的快速构建
- Linux 文件系统启动记录
- FastRVC功能记录
- Android 存储学习之保存系统短信到SD卡
- biee mysql,Linux环境中使用BIEE 连接SQLServer业务数据源的简单示例
- Linux下分割、合并文件——dd和cat
- php换行符sql,如何在PHP和MySQL的textarea中给换行符的同时避免SQL注入?
- php 改变页面元素,JavaScript动态改变页面元素
- mysqld和mysql区别_mysqld与mysqld_safe的区别
- html在新网页输出结果是,JavaScript考试试卷