一般我们在微信公众号,或者其他web页面写好的html、css是可以直接迁移到微信小程序中的,但是迁移之后,需要对应的,修改一些标签和样式才行。
这里面需要细心点,否则就会出现我那篇文章中出现的问题:
青叶:微信小程序 wxss编译错误 error at token "#record"zhuanlan.zhihu.com
下面我们分别来说下html->wxml和css->wxss
html->wxml
通常来说,有以下几个标签需要注意:
<div></div> -----> <view></view>
<span></span> -----> <text></text>
<ul></ul> -----> <view class="ul"></view>
<li></li> -----> <view class="li"></view>
<img src=""> -----> <image src=""></image>
css->wxss
对应上面的wxml中的修改
div ----------> view
span ----------> text
ul ----------> .ul
li ----------> .li
a ----------> .a 或者wxml中如果不用 class="a" ,那就用 > 或者 空格 来做子级分层也是可以的,但是建议直接加class,如果原css中是以 .demo > a 就会方便许多
img -----------> image
基本对应的,就是上面这些。
因为每个人的编码习惯可能不同,导致细节上后期修改需要根据自己的习惯调整,但原理不变。
样式调整好,最后一步就是修改原html中的变量了,比如你用的是_smart等模板引擎_,那就需要将里面的{$demo}换成你在小程序中js定义获取的新变量,比如{{demo}},还有for循环换成wx:for,if判断换成wx:if 等等,这里就不一一赘述了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。