更多小程序demo 请查看https://github.com/htyf-mp-community/demo
| 首页 | 搜索 | 详情 | 播放 |
|---|---|---|---|
 |
 |
 |
 |
yarn
# ios
npm run ios
# android
npm run android
# H5
npm run dev:h5
# 微信小程序
npm run dev:weapp
# 红糖云小程序(选真机调试)
npm run dgz
- 所有样式名不能重复(最好以文件相对路径为前缀)，不能嵌套, 写法如普通 css. 具体可参考
注意 7。- 引用资源请用此用法
import xxpng from '@/assets/xxx.png';所有静资源放@/assets目录。- 为了更好的兼容性，禁用 css 背景图，所有图片以 image 标签写入到页面，可以用绝对定位来布局。
- 定位只能支持用 position: absolute | relative。
- 所有图片资源 禁用@2x @3x 等后缀。
- border-radius 值必须为数字，圆形可以设置一个 99999px。
- 可参考 taro 开发 react-native 文档
https://docs.taro.zone/docs/react-native-remindbox-shadowcss 阴影不能使用。- css 居中不能使用
margin: 0 atuo;, 可用 flex 布局去居中。- 页面
index.config.ts配置。
export default definePageConfig({
navigationBarTitleText: '页面',
backgroundColor: '#fff',
// 禁滚动
disableScroll: true,
// 自定页面头
navigationStyle: "custom",
})
- 设置文字
line-height属性，注意防止与文字相关的布局紊乱。- 但凡涉及文字，尽量使用
<Text></Text>标签进行包裹。- 页面头部组件使用自定义
import { Header } from '@/_UIHOOKS_';- 页面如需要滚动使用
import { ScrollView } from '@tarojs/components'';- 每个页面都规则模板(必须引入
<UIProvider>)
import {View } from '@tarojs/components'
import { Header, UIProvider } from '@/_UIHOOKS_';
function Index() {
return (
<View>
</View>
)
}
export default () => <UIProvider><Index /></UIProvider>
_UIHOOKS_目录里的为全局组件目录_UIHOOKS_/store目录放redux相关业为, 全局存储状态都应放这统一面管理_UIHOOKS_目录里的样式名规范：uihooks-相对路径-具体类名
@/_UIHOOKS_ // 公共组件/公共方法
@/_UIHOOKS_/store // reudx store
@/assets // 全局资源
打包其它小程序按 taro 官方文档打包
如打包红糖云服小程序
npm run build:dgz
把打包出来的根目录 dgz/build/outputs 目录上传自己的 oss/cos 上
{
"type": "app",
"name": "RN模版",
"projectname": "RN模版",
"appid": "__rn_temp_appid__",
"appUrlConfig": "https://raw.githubusercontent.com/htyf-mp-community/htyf-mp/main/mini-apps-template-rn/dgz/build/outputs/app.json",
"zipUrl": "https://raw.githubusercontent.com/htyf-mp-community/htyf-mp/main/mini-apps-template-rn/dgz/build/outputs/dist.dgz"
}
并将以上 json 生成二维码就可以用红糖云服 app 扫码加入小程序
开发迭代不易，觉得 App 好用的，有能力的请投喂一下，也可以给个星星
| 微信 | 支付宝 |
|---|---|
 |
 |